使用 CSS 的文本居中在 IE 中不起作用答案

【问题标题】：Text Centering Using CSS not working in IE使用 CSS 的文本居中在 IE 中不起作用
【发布时间】：2010-09-09 06:38:39
【问题描述】：

我无法让表格中的文本在 IE 中居中显示。

在 Firefox 2、3 和 Safari 中一切正常，但由于某种原因，文本在 IE 6 或 7 中未居中显示。

我正在使用：

h2 {
  font: 300 12px "Helvetica", serif; 
  text-align: center; 
  text-transform: uppercase;
}

我也尝试添加margin-left:auto;、margin-right:auto 和position:relative;

无济于事。

【问题讨论】：

【解决方案1】：

CSS text-align 属性应该在父元素上声明，而不是在你试图居中的元素上。 IE 使用 text-align: center 属性使文本居中。 Firefox 使用 margin: 0 auto 并且必须在您尝试居中的元素上声明。

<div style="text-align: center">
    <h2 style="margin: 0 auto">Some text</h2>
</div>

【讨论】：

【解决方案2】：

表格单元格需要文本对齐：居中。

【讨论】：

【解决方案3】：

可能是错字，但您在这里缺少分号：

margin-left:auto; margin-right:auto position:relative;

应该是：

margin-left:auto; margin-right:auto; position:relative;

如果这不起作用，请确保您尝试使文本居中的元素具有一定宽度。尝试将宽度设置为 100%，看看是否有任何变化。

【讨论】：

【解决方案4】：

text-align: center 应该足够了，因为您将文本置于块元素 (h2) 内的中心 - 调整边距将更改块的位置，而不是文本。

我想知道是否只是 IE 对你的 font 声明有一个假吐？

【讨论】：

【解决方案5】：

在 h2 周围的 div/td 中使用 text-align:center。

<table style = "width:400px;border:solid 1px;">
    <tr>
        <td style = "text-align:center;"><h2>hi</h2></td>
    </tr>
</table>

编辑：哇，stackoverflow 的社区速度非常快！

【讨论】：

【解决方案6】：

如果您可以/想要使用 flexbox，您也可以使用以下内容。

display: flex;
justify-content: center;
align-items:center

【讨论】：