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

Question

我在使表格内的文本在 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;

无济于事。

Answer 1

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

Answer 2

CSS text-align 属性应该在父元素上声明，而不是在您想要居中的元素上声明。IE 使用文本对齐：center 属性使文本居中。Firefox 使用边距：0 auto 并且必须在您要居中的元素上声明它。

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

Answer 3

可能是一个错字，但这里缺少一个分号：

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

应该：

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

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

Answer 4

这 text-align: center 应该足够了，因为您将文本集中在块元素（h2）内 - 调整边距将改变块的位置，而不是文本。

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

Answer 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 的社区速度相当快！

Answer 6

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

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