您的位置：首页 > 其它

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

2014-09-25 16:05 309 查看

我们经常用DIV+CSS布局网页的时候，正常情况下需要将div居中显示时，使用Css样式:margin:0 auto就可以了，但有时使用margin:0 auto后在FireFox浏览器、谷歌Chrome浏览器里能居中，而在IE678里却不能不居中。

例如以下代码:

<style type="text/css">

#con{width:980px;martin:0 auto;}

</style>

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

那我们该怎么办呢？那下面建站教程网就给出三种有效解决办法：

解决方法一

因为所有HTML页面的起初定义都在DTD文档里，所以出现这个现象的原因在于文档的DTD声明，应该修改DTD为

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

解决方法二

可以是对网页主体<body>声明文本居中，即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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航