Centrar imágenes con CSS
Escrito por Carlos Carmona   
Sábado, 09 de Mayo de 2009 09:26

 


 

Centrar el texto en una web es facil, solo hay que aplicar el estilo text-align: center; sin embargo, esto no funciona si se lo aplicamos a una imagen, ¿Por qué? 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 class="centrar-imagen"><img src="/ruta"></div>

    * Este tutorial está bajo licencia CopyLeft. Se permite por tanto su libre copia y distribución a condición de poner el nombre del autor y un enlace a www.scourdesign.com

Última actualización el Miércoles, 20 de Mayo de 2009 15:59
 
Make Text Bigger Make Text Smaller Reset Text Size

Usuarios Online

Tenemos 64 invitados conectado
Titulo Aleatorio