http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html
我们经常用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>