IE没有将这些图像居中，有解决办法吗？答案

【问题标题】：IE not centering these images, is there a fix?IE没有将这些图像居中，有解决办法吗？
【发布时间】：2010-08-04 23:45:14
【问题描述】：

我对此页面的问题是“高中”、“初中”和“小学”图像在除 IE6、7 和 8 之外的所有浏览器中完美居中。

页面的相关部分：（为清晰而编辑）

CSS：

#block {
    clear: both;
    width: 682px;
}
.education_level_wrapper {
    float: left; 
    width: 100%;
}
.education_level {
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

HTML：

<div id="block">
    <div class="education_level_wrapper">
        <img src="[sniped]/Title_HS.png" class="education_level" />
    </div>
</div>

IE：

铬：

我在这里做错了什么？

编辑：

在此处查看固定版本：Non-Archived Graphic。上面的链接是为了存档目的而保持一致的快照。

【问题讨论】：

标签： html css internet-explorer centering

【解决方案1】：

在您的页面前添加 <!DOCTYPE HTML> 以使浏览器尝试遵守 CSS 规范。

现在，您正在让浏览器像 2001 年一样呈现这些页面。

技术解释是，在 IE6 怪癖模式下，如果不处于标准模式，自动边距将无法工作。如果您必须使用 quirks 模式，解决方法是在父元素上应用 text-align:center。但是你应该使用标准模式，也就是理智模式。

【讨论】：

哇，这很简单...谢谢！

【解决方案2】：

education_level_wrapper 函数中的属性 float: left 是这个问题的可能原因。

使用边距来调整定位而不是

浮动

【讨论】：

float 属性是必需的，因为布局。如果您查看.education_level，您会发现我尝试使用margin。 IE 标准模式是问题所在，请参阅已接受的答案。