IE下margin:0 auto不居中解决方法

正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。

如下代码:

<style type="text/css"> 
    #con{width:980px;martin:0 auto;}
</style>

<div id="con">margin: 0 auto 内容居中显示</div>

解决方法一

对网页主体声明文本居中,即body{text-align:center}

如下代码:

<style type="text/css">
     body{text-align:center}
     #con{width:980px;martin:0 auto;}
 </style>

<div id="con">margin: 0 auto 内容居中显示</div>

解决方法二

其实和解决方法一差不多,只是在要居中的div外层添加多一个div,并使其居中

如下代码:

<style type="text/css">
   #con{width:980px;martin:0 auto;}
</style>

<div style=“text-align:center”>
  <div id="con">margin: 0 auto 内容居中显示</div>
</div>

解决方法三
出现这个现象的原因在于文档的DTD声明
这时可以将DTD修改为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

猜你喜欢

转载自blog.csdn.net/MrLiber/article/details/79807419