Centrar imágenes con CSS

p {
text-align: center;
}

lo que se centrará será el contenido de la etiqueta, no la etiqueta:

<p>Este es el contenido al que afectará la propiedad</p>

Por lo tanto, como la etiqueta img es una etiqueta vacía, es decir, no podemos poner:

<img>ruta_de_la_imagen_</img>

en cuyo caso sí que funcionaría el text-align, para centrar una imagen con CSS deberemos tomar otros caminos. Basicamente hay 2:

El más correcto sería hacer que la etiqueta img sea tratada como elemento de bloque y darle a la propiedad margin un valor de auto, de modo que el navegador asignará margenes proporcionales en referencia a la caja padre que contenga a la imagen:

img {
display: block;
margin: auto;
}

Sin embargo, esto no funciona en un navegador (a ver si lo adivinan...), en IE5.x, que a día de hoy sigue siendo muy usado, por lo que, aunque menos correcta, y siguiendo la argumentación del funcionamiento del atributo text-align, si se le asigna el valor center a una etiqueta que sea contenedora de la imagen, esta se centrará, ya que, como decíamos, este valor afecta al contenido, no a la etiqueta a la que se le asigne, así que, ya sea con etiquetas div o p (siempre elementos de bloque), creando una clase se conseguiría este efecto:

.centrar-imagen {
text-align: center;
}

Y luego lo aplicamos así:

<div class="centrar-imagen"><img src="ruta"></div>

Usuarios que han visto este tema también han visto...

- Equivalencias en tamaños tipográficos (CSS)
- CSS: Etiquetas
- Clases, pseudoclases y pseudoelementos en css
- Creando esquinas redondeadas usando CSS
- Decorando el drop down menú en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento