为什么容器不在 Internet Explorer 中居中？

Question

我有我的作品集，在所有浏览器中看起来都很棒，但在 Internet Explorer 中，容器似乎没有居中，我正在使用 margin: 0 auto; 但它不起作用。如何在 Internet Explorer 中修复？

这是代码的链接： http://christianbovine.com/

Answer 1

旧版本的 IE 需要不礼貌地使用文本对齐，如下所示：

<div style="text-align: center;">
    <div style="text-align: left; width: 300px; margin: 0 auto;">
        <p>Content goes here</p>
    </div>
</div>

添加宽度纯粹是为了参考，添加边距纯粹是为了跨浏览器兼容性。

对于你的情况，我建议添加第二个“容器”div（即containerInner），然后你可以在CSS中添加如下内容：

div#container { text-align: center; }
div#containerInner { text-align: left; }

Answer 2

在父元素中，使用“text-align”属性。例如：

body{
    text-align:center;
}

Answer 3

使用 text-align:center 作为正文标记或将所有内容包装在标记内。

另外，您可能需要考虑使用 display:inline-block。这允许您指定元素的宽度和高度属性（如果它只是设置为内联而不是块，则宽度和高度属性将被忽略）（如果是这种情况）。