css - 使用 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;

无济于事。

score 6 · Accepted Answer

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>

score 4 · Accepted Answer

4

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

于 2008-09-16T01:41:55.440 回答

score 2 · Accepted Answer

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

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

应该：

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

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

score 0 · Accepted Answer

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

font我想知道是否只是 IE 对你的声明有一个愚蠢的吐口水？

score 0 · Accepted Answer

在 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 的社区非常快！

score 0 · Accepted Answer

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

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

6 回答 6