其实引发问题的并不是margin:0 auto;,直到现在好像没有遇到过IE在添加了margin:0 auto而不居中的情况。
早上同事发来链接,说是页面排版在IE下出问题了,让我看看。
我看了一下,把代码copy下来,静态页也是歪的,找了一下看是否是掉了闭合标签之类的,发现并没有;难道是doctype声明错误?都是对的,原来是因为在页面的头部被加入了一段不知道干什么用的注释引起的,删掉注释,页面正常。
不过也查了一下资料,来记录一下IE下 margin:0 auto 引起不居中的话,应该怎么解决:
1.给 body 或者 在body下嵌套一层div,加上 text-align:center;
<body style="text-align:center;">......</body>
<body> <div style="text-align:center;"> ...... <div> </body>
2.出现这个问题的原因可能在于Doctype声明
修改声明为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
相关推荐
本文将深入探讨在Internet Explorer(IE)浏览器中,为何`margin: 0 auto;`在某些情况下无法使块级元素水平居中,并提供解决方案。 首先,`margin: 0 auto;`这个CSS声明通常用于使具有固定宽度的块级元素在容器内...
此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: 复制代码代码如下: ”cnbruce”>margin: 0 auto 看看内容居中否</div> 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<...
关于浏览器兼容性问题,虽然`margin: 0 auto`在大多数现代浏览器中都能正常工作,但在一些旧版本的IE(尤其是IE6和IE7)中,可能需要额外的处理。一种常见的解决方案是在`body`标签中添加类名,并在CSS中定义`text-...
正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。 如下代码: 复制代码代码如下:<style type=”text/css”>#con{...
总之,要解决HTML中使用`margin: 0 auto`不居中的问题,关键在于正确地声明DOCTYPE,确保浏览器在标准模式下解析页面。同时,排查其他可能影响居中效果的CSS样式,并确保应用于正确的目标元素。这样,无论是在IE还是...
}`在Firefox下工作正常,但在IE下却不居中。 首先,我们需要理解这个问题的原因。IE6默认使用Quirks模式解析页面,这种模式下的CSS行为与标准模式大不相同。在这种模式下,`margin: 0 auto;`并不总是能够使元素居中...
通常,我们有两种主要的方法来实现元素的水平居中:`text-align:center` 和 `margin: auto`。这篇文章将重点讨论如何在Internet Explorer (IE)浏览器中使用`margin: auto`实现居中对齐,以及为什么在某些情况下IE...
3. 使用`margin:0 auto`可以使元素在容器中水平居中,但必须确保元素具有固定的宽度,并且`margin:0 auto`应用于元素自身,而非父元素。 4. 试图为内联元素如`<img>`设置`margin`属性通常无效,除非将其转换为块级...
通过设置元素的左右外边距(`margin-right`和`margin-left`)为`auto`,可以使其在容器中水平居中。例如: ```css #wrap { width: 760px; margin: 0 auto; /* 其他样式 */ } ``` 这个例子中,`#wrap`会根据其...
在父元素上启用Flexbox并设置`justify-content: center`和`align-items: center`,即可实现子元素的水平和垂直居中: ```css .container { display: flex; justify-content: center; align-items: center; ...
5. **Margin Auto 居中** 对于块级元素,如 `div`,可以使用 `margin: 0 auto;` 来实现水平居中,但这种方法不支持垂直居中。 6. **Table 居中** 在表格中,可以通过设置 `table { margin: 0 auto; }` 和 `td { ...
`来实现居中: ```html <div style="text-align: center;"> <img src="example.jpg" style="display: block; margin: 0 auto;"> ``` 在上述代码中,图片通过设置为`block`级别的元素,并利用`margin: 0 auto;`...
为了解决上述兼容性问题,可以采用以下几种方法来确保块级元素在各个浏览器中都能正确居中: 1. **使用margin属性**:为需要居中的块级元素设置`margin-left:auto; margin-right:auto;`。这种方法适用于大多数情况...
但是这样做的结果就是,元素不居中了。这说明fixed使对象脱离了正常文档流。 解决方案: 复制代码代码如下: #element{ position:fixed; margin:0 auto; left:0; right:0; } 但是在IE7以下的版本中无法工作,要将...