text-align可以使得 行内元素 在 块级元素 中居中
参照W3C标准的浏览器 块级元素 在 块级元素 中是无法居中的
<div id="parent" style="text-align:center">
<div id="child"></div>
</div>
这段代码在主流标准浏览器中的效果如下:
但是在IE6 IE7 以及 IE8的混杂模式下面却居中了
所以为了兼容蛋痛的IE6 7和IE8的混杂模式我们可以用下面的代码实现 居中
<div id="parent" style="text-align:center">
<div id="child" style="width:50px;margin:0 auto"></div>
</div>
我们可以使用margin-left:auto;margin-right:auto元素进行居中,(要设定width)
由于IE6 7 8的混杂模式不支持这种居中方式,所以在parent中设置上text-align:center便可
通过这种方式便可以实现水平居中 这里text-align:center的兼容性是大家需要注意的