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 |
resetSed vitae ante libero, vitae bibendum turpis.
Translate
