Centralização de texto usando CSS não funciona no IE

Question

Estou tendo problemas para fazer com que o texto de uma tabela apareça centralizado no IE.

No Firefox 2, 3 e Safari tudo funciona bem, mas por algum motivo o texto não aparece centralizado no IE 6 ou 7.

Estou a usar:

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

Eu também tentei adicionar margin-left:auto;, margin-right:auto e position:relative;

para nenhum proveito.

Answer 1

A célula da tabela precisa do alinhamento de texto:Centro.

Answer 2

A propriedade CSS text-align deve ser declarada no elemento pai e não no elemento que você está tentando centralizar.IE usa alinhamento de texto:propriedade center para centralizar o texto.Firefox usa margem:0 auto e deve ser declarado no elemento que você está tentando centralizar.

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

Answer 3

Pode ser um erro de digitação, mas está faltando um ponto e vírgula aqui:

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

Deveria estar:

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

Se isso não funcionar, certifique-se de que o elemento no qual você está tentando centralizar o texto tenha alguma largura.Tente definir a largura para 100% e veja se alguma coisa muda.

Answer 4

O text-align: center deve ser suficiente, já que você está centralizando o texto dentro de um elemento de bloco (h2) - ajustar as margens alterará a posição do bloco, não do texto.

Eu me pergunto se é só porque o IE está cuspindo nisso font declaração que você tem aí?

Answer 5

Use text-align:center no div/td que circunda o h2.

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

editar:uau, a comunidade do stackoverflow é muito rápida!

Answer 6

Se você pode/quer usar o flexbox, você também pode usar o seguinte.

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