使用inline-block做水平垂直居中
父级宽高不定,如何使子元素水平垂直居中?
下面是用 display: inline-block 实现的:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直自适应</title>
<style>
* {
margin: 0; padding: 0;
}
.box {
position: relative;
width: 400px; height: 600px;
margin: 100px auto;
border: 1px solid #666;
text-align: center;
}
.content {
width: 100px; height: 100px;
display: inline-block;
vertical-align: middle;
background: red;
}
.middle-span {
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
<span class="middle-span"></span>
</div>
</body>
</html>
子级 display: inline-block; ,父级 text-align: center; ,实现水平居中。
子级 vertical-align: middle; ,且span height: 100%; ,实现垂直居中。
使用inline-block做水平垂直居中的更多相关文章
- css实现水平/垂直居中效果
一.如果是已知宽高的元素做水平/垂直居中效果的话,可以直接用具体的数值指定定位布局或偏移布局,这个就不过多讨论.这里主要介绍在不知宽高或需要弹性布局下的几种实现方式. 二.1.table表格法思路:显 ...
- 如何将一个div水平垂直居中?4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 如何将一个div水平垂直居中?6种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- IE6+未知尺寸元素水平垂直居中
首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...
随机推荐
- Android 字体颜色变化(点击)
在开发的过程中,经常会遇到这样的场景,点击按钮,背景颜色发生变化:在drawable中,定义xxx.xml(selector) <selector xmlns:android="htt ...
- Matlab 矩阵运算
1.Syms 和sym的区别: syms是定义多个符号是符号变量的意思 sym只能定义一个符号变量,但可以具体到这个符号变量的内容 例:syms f z; %定义下x和y f=sym('a+b+c') ...
- css3中的圆角属性
圆角属性:border-radius <style type="text/css"> .content{ border: 1px solid green; width: ...
- git “bad index file sha1 signature fatal: index file corrupt”错误
在执行commit或revert等操作时,提示“bad index file sha1 signature fatal: index file corrupt”错误,导致操作失败.这是由于git的in ...
- logstash multiline
filter { multiline { pattern => "^\s+%{TIMESTAMP_ISO8601}" negate=>true what=>&qu ...
- 如何新建XCode项目
一.IOS的基础知识 1.只有一个应用程序正在运行.在IOS上,每一段时间内只能激活一个应用程序并在屏幕上显示. 2.只有一个窗口.只允许应用程序操作的一个窗口. 3.访问受限.只能在IOS为应用程序 ...
- HDOJ 1076 An Easy Task(闰年计算)
Problem Description Ignatius was born in a leap year, so he want to know when he could hold his birt ...
- 广州Uber优步司机奖励政策(12月28日到1月3日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 简单的新闻客户端APP开发(DCloud+thinkphp+scrapy)
前端时间花了1个月左右,搞了个新闻APP,功能很简单,就是把页面版的新闻条目定时爬到后台数据库,然后用app显示出来. 1.客户端 使用了DCloud框架,js基本是个新手,从没写过像样的代码,htm ...
- RequireJS进阶(一)
为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...