IE下margin:0 auto为什么不居中?

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>

时间: 2024-08-26 03:43:09

IE下margin:0 auto为什么不居中?的相关文章

ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码

今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了,检查了好几遍,没问题,然后用火狐和谷歌浏览器测试,居中了... 看来是浏览器兼容性的问题,突然想起现在用了win7,ie已经升级到了ie8,看来问题就处在ie8的兼容性上.百度之.... 特将解决方法复制到下面: IE6,7,Firefox下实现居中一般用:margin: auto 来实现,但在IE8下,这是不够的.现提供两种解决的办法: 方法一(推荐): 首先页首必须设

IE浏览器解决margin:0 auto;不居中办法!

一般情况下需要将div居中显示时,使用Css样式:margin:0 auto;或者margin:0 auto 1px;即可,但有时使用margin:0 auto后在firef.Chrome等浏览器里能居中,而在IE678里不居中的现象. 如下代码: <style type="text/css"> #con{width:980px;martin:0 auto;} </style> <div id="con">margin: 0 au

margin:0 auto 在ie不居中的解决办法

一般情况下需要将div居中显示时,使用Css样式:margin:0 auto;或者margin:0 auto 1px;即可,但有时使用margin:0 auto后在firef.Chrome等浏览器里能居中,而在IE678里不居中的现象. 如下代码: <style type="text/css"> #con{width:980px;martin:0 auto;} </style> <div id="con">margin: 0 au

margin:0 auto居中无效

让最外层DIV在IE浏览器中水平居中,除了对其设置margin:0 auto外,一般还要对body设置样式,但一般高版本浏览器无须设置此css样式也能使DIV居中,低版本IE比如IE6和对标准比较严格浏览器需要设置text-align:center. 有时不经意对要居中的最外层设置float:left或float:right也是造成设置margin:0 auto布局不能水平居中原因. 因为设置float是让DIV浮动靠左或浮动靠右,你要让DIV居中肯定需要设置margin:0 auto,这个时候

margin:0 auto;不居中?

1.没有设置宽度 <div style="margin:0 auto;"></div> 看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题! 2.没声明DOCTYPE ①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本.要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分! ps:关于DOCTYPE详细介绍,请看http://www.cnbl

margin:0 auto在IE中失效的解决方案

转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin:0 auto是可行的. 但是到了IE6,IE7,IE8则出现了不能居中的现象. 开始也没怎么在意,刚刚在浏览网页的时候看到这篇文章,帮我解决了这个疑问. 解决方案如下: 很多人都忽略了“文档类型”.下面就是正确设置的文档类型了. <!DOCTYPE html PUBLIC “-//W3C//DTD

margin:0 auto 与 text-align:center 的区别

基本概念:1.text-align: 属性规定元素中的文本的水平对齐方式;  该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;一般情况下设置文本对齐方式的时候使用此属性.例如:div { text-align: left; }  //文本居左对齐.所有浏览器都支持 text-align 属性:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit".2.margin 是设置对象四边的外延边距,被称为外补丁或外边距.例如:

css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?

auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少.960px的定位宽度永远居中. css中的auto是自动适应的意思,而在css中auto往往都是默认值. 正如margin:0 auto,意思就是上下边距为0,左右边距为auto,就是自动适应.但是,如果要使用他的话,就必须给标签配上指定的宽度,如下:<div class="center&q

margin:0 auto 与 text-align:center

1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式; text-align:center 设置文本或img标签等一些内联对象的居中. 2.margin :是设置对象四边的外延边距. margin:0 auto 设置块元素的居中.   注意:这两个属性IE与FF的理解也有所不同. <body> <p> <img src=""/> </p> </body> 1. 设置 body{ text-a