浏览器兼容性经典问题（六） text-align的使用

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的兼容性是大家需要注意的