Cómo Centrar imágenes en CSS

Cómo Centrar imágenes en CSS

Se debe aplicar el estilo text-align: center; sin embargo, esto no funciona si se lo aplicamos a una imagen,  por que el valor del atributo text-align de css afecta al contenido de la etiqueta, no a la etiqueta en sí a la que se lo apliquemos, por lo tanto, si se especifica esta propiedad para un parrafo:

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><img src=”ruta”></div>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: