Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...
\n";
}
}
}
lecturas();
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>
