在IE中使用margin:0 auto页面不能居中

作者:袖梨 2022-06-25

今天小涛偶然间发现了一个问题,就是某些页面用IE浏览器的时候margin:0 auto页面不能居中,其他浏览器正常,搜索了一下发现两种解决方案:

1、更改DOCTYPE为 xhtml 1.0 tranditional (html 4.01 下无效)
2、在块外边添加div,并对此div应用text-align:center


加一个3C 调用声明

Html代码 

 代码如下 复制代码


我不想加

还有一个说法,说要给body加一个属性

Html代码  
 

 代码如下 复制代码
text-align:center;

我更不想加,代价有点大

既然给body加这个属性能行,那干嘛不在外面包上一个带这个属性的div呢
测试之,通过

 代码如下 复制代码

 

 
 
居中
 
 

网上有朋友说

可以尝试下使用绝对定位到父级元素的一半, position:absolute;left:50%; 然后使用居中元素一半宽度的左负空白边,例如居中元素宽度为 760px; margin-left:-360px
 
总结:

IE6跟火狐的区别,IE的text-align:center能使其包含的块状元素和行内元素以及文本内容居中.
而在火狐下面text-align:center只能使其包含的行内元素和文本内容居中.

margin:0 auto能使块状元素居中,但不能使行内元素居中,这个在火狐和IE6下都是一样的.对于IE6以前版本的浏览器需要配合其父元素的text-align:center才能居中,您还为IE下使用margin:0 auto页面不能居中的问题头痛吗

相关文章

精彩推荐