为啥 Internet Explorer 中没有容器中心？

Posted 2023-03-05

【中文标题】为啥 Internet Explorer 中没有容器中心？

【英文标题】：Why doesn't the container center in Internet Explorer?为什么 Internet Explorer 中没有容器中心？

【发布时间】：2011-07-15 19:36:57

【问题描述】：

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

代码链接如下： http://christianbovine.com/

【问题讨论】：

什么版本的IE？它在 IE8 上看起来不错，除了 email me 按钮

我猜是“电子邮件”按钮将所有内容都向右推……这是我不想要的。

【参考方案1】：

旧版本的 IE 需要不恰当地使用 text-align，如下所示：

<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; 

【参考方案2】：

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

body
    text-align:center;

【参考方案3】：

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

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