文本居中使用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

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>

Answer 2

表格单元格需要text-align：center。

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，也可以使用以下内容。

<new-orders>
<div (phoneChanged)="phoneChanged($event)">{{phoneNumber}}</div>
</new-orders>