Contenedores y contenidos: Alinear

Hay elementos HTML que son bloques, ocupan todo el ancho disponible y contienen a otros elementos o textos. En este ejemplo, un DIV tiene dos contenidos, un texto dentro de una etiqueta SPAN y una imagen en la etiqueta IMG.

<div>
  <span> ....... un texto ....... </span>
  <img src="URL_imagen" />
</div>

Para centrar el contenido, usamos la propiedad text-align: center pero ¿dónde? Obvio, pensamos que si queremos centrar el texto y la imagen, hay que centrar esas etiquetas:

<span style="text-align: center;"> ....... un texto ....... </span>
<img style="text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

No funciona.

En términos generales, para centrar un contenido debemos establecer esa propiedad en el contenedor y no en el contenido:

<div style="text-align: center;">
  <span> ....... un texto ....... </span>
  <img src="URL_imagen" />
</div>

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

Esto es debido a que etiquetas como SPAN e IMG no son bloques, sólo ocupan el ancho de su contenido; lo mismo ocurrirá con muchas otras como A, INPUT, B, STRONG, EM, etc. todas estas son las llamadas etiquetas inline.

Cualquier etiqueta inline puede ser convertida en una etiqueta de bloque; para eso, le agregamos la propiedad display: block así que ya no nesitamos un contenedor:

<span style="display: block; text-align: center;"> ....... un texto ....... </span>
<img style="display: block; text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

Con el texto no hay problema pero la imagen no se centra; en esa etiqueta necesitamos algo más, agregarle margin: valorpx auto Esa palabra auto, hará que se centre horizontalmente, sin importa su ancho:

<span style="display: block; text-align: center;"> ....... un texto ....... </span>
<img style="display: block; margin: 10px auto; text-align: center;" src="URL_imagen" />

Pero, auto no sólo sirve para las imágenes; en esos ejemplos, el SPAN ocupa todo el ancho disponible pero, podríamos querer que tuviera un ancho definido:

<span style="display: block; text-align: center; width: 500px;"> ....... un texto ....... </span>
<img style="display: block; margin: 10px auto; text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

Deberíamos usar el mismo método que antes y aplicar margin:

<span style="display: block; margin: 10px auto; text-align: center;"> ....... un texto ....... </span>
<img style="display: block; margin: 10px auto; text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

En resumen, todos los elementos de bloque o convertidos en bloque usando CSS, se centran poniendo el valor auto en sus márgenes izquierdo y derecho pero, requieren que establezcamos su ancho con width.

¿Es posible hacerlo sin conocer ese ancho o sin establecerlo? Salvo en caso de imágenes esto no era posible hasta que la propiedad display empezó a aceptar otros valores, primero en algunos navegadores pero ahora ya está disponible en Internet Explorer 8 y es uno de los motivos por los cuales deberíamos tener actualizado el navegador ya que estas nuevas propiedades, podrían llegar a cambiar la forma en que se diseñan los sitios web.

Un ejemplo sencillo, un párrafo cuyo contenido está centrado y cuyo ancho desconocemos; margin no nos ayuda a centrarlo:

<p style="margin: 10px auto; text-align: center;"> ....... un texto ....... </p>

Sed vitae ante libero, vitae bibendum turpis.

Lo centraremos agregando la propiedad display: table si necesidad de tener que conocer el ancho:

<p style="display: table; margin: 10px auto; text-align: center;"> ....... un texto ....... </p>

Podemos probarlo cambiando el contenido; tanto en IE8 como en Firefox, Chrome u Opera:
demo 1 | demo 2 | reset

Sed vitae ante libero, vitae bibendum turpis.