经常会遇到各种元素要求居中的,今天把他们都叫出来统一解决:
1.水平居中
1.1行内元素
text-align:center;
1.2固定宽度块级元素
margin-left:auto;margin-right:auto;
注意:一定要确保设定了宽度值,而且声明了DOCTYPE。
1.3不确定宽度块级元素
<pre name="code" class="html"><div class="wrap">
<ul>
<li>不固定宽度</li>
<li>不固定宽度</li>
<li>不固定宽度</li>
</ul>
<ul>
<span style="white-space:pre"> </span><li>不固定宽度</li>
<li>不固定宽度</li>
</ul>
</div>
由于ul中的li数量未知,所以宽度不确定,现要使ul水平居中。
这里推荐一种最常用的方法:inline-block。
<pre name="code" class="css">.wrap{background:#ff0;text-align:center;padding:20px;}
li{
list-style:none;
background:#f0f;
display:inline-block;
*display:inline;
*zoom:1;
}
2.竖直居中
2.1父元素高度不确定的行内元素
给父元素设置相同的上下内边距。
2.2父元素高度确定的单行文本
给父元素设置line-height,值与父元素高度相同,如果使用相对字体,外加overflow:hidden,你懂的。
2.3父元素高度确定的多行文本、图片以及块级元素
方法有很多种,但是个人偏好用绝对定位。
<div class="wrap">
<div class="m">
垂直居中
</div>
</div>
.wrap{
background:#ff0;
height:200px;
position:relative;
}
.m{
position:absolute;
background:#f0f;
top:50%;
height:80px;
margin-top:-40px;
}
这个方法需要知道父元素和子元素的高度。还有一种简单方法:
.m{
background:#f0f;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height:100px;
width:100px;
}
3.总结
网上查了资料,方法真的很多,但是比较好的就这几种,选一种最适合的就行了。