Centrado de texto usando CSS no funciona en IE

Question

Tengo problemas para que el texto dentro de una tabla aparezca centrado en IE.

En Firefox 2, 3 y Safari todo funciona bien, pero por alguna razón, el texto no aparece centrado en IE 6 o 7.

Estoy usando:

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

También he intentado agregar margin-left:auto;, margin-right:auto y position:relative;

en vano.

Answer 1

La celda de la tabla necesita la alineación de texto:centro.

Answer 2

La propiedad de alineación de texto CSS debe declararse en el elemento principal y no en el elemento que está intentando centrar.IE usa alineación de texto:centrar la propiedad para centrar el texto.Firefox usa margen:0 auto y debe declararse en el elemento que intenta centrar.

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

Answer 3

Puede que sea un error tipográfico, pero aquí le falta un punto y coma:

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

Debiera ser:

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

Si eso no funciona, asegúrese de que el elemento en el que intenta centrar el texto tenga algo de ancho.Intente configurar el ancho al 100% y vea si algo cambia.

Answer 4

El text-align: center debería ser suficiente, ya que estás centrando el texto dentro de un elemento de bloque (h2); ajustar los márgenes cambiará la posición del bloque, no el texto.

Me pregunto si es sólo que IE está haciendo un tonto con eso. font declaración que tienes ahí?

Answer 5

Utilice text-align:center en el div/td que rodea el h2.

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

editar:¡Vaya, la comunidad de Stackoverflow es bastante rápida!

Answer 6

Si puede/quiere usar flexbox, también puede usar lo siguiente.

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