div样式在IE下margin:0 auto不居中多种解决方法

a 夏天 提交于 2019-12-03 14:26:32

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

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

如下代码:
 

XML/HTML Code 复制内容到剪贴板
  1. <style type="text/css">  
  2. #con{width:980px;martin:0 auto;}  
  3. </style>  
  4. <div id="con">margin: 0 auto 内容居中显示</div>  


解决方法一

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

XML/HTML Code 复制内容到剪贴板
  1. <style type="text/css">  
  2. body{text-align:center}  
  3. #con{width:980px;martin:0 auto;}  
  4. </style>  
  5. <div id="con">margin: 0 auto 内容居中显示</div>  


解决方法二

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

XML/HTML Code 复制内容到剪贴板
  1. <style type="text/css">  
  2. #con{width:980px;martin:0 auto;}  
  3. </style>  
  4. <div style=“text-align:center”><div id="con">margin: 0 auto 内容居中显示</div></div>  

解决方法三

出现这个现象的原因在于文档的DTD声明;
修改DTD为

XML/HTML Code 复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!