您的位置：首页 > Web前端 > CSS

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

2014-02-26 15:03 405 查看


正常情况下需要将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 复制内容到剪贴板

<style type="text/css">  
#con{width:980px;martin:0 auto;}  
</style>  
<div id="con">margin: 0 auto 内容居中显示</div>  



解决方法一

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

即:

 

XML/HTML Code 复制内容到剪贴板

<style type="text/css">  
body{text-align:center}  
#con{width:980px;martin:0 auto;}  
</style>  
<div id="con">margin: 0 auto 内容居中显示</div>  



解决方法二

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

即：

 

XML/HTML Code 复制内容到剪贴板

<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为

XML/HTML Code 复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航