Buenas, efectivamente, no se puede centrar una imagen con text-align, el motivo es el siguiente:
El atributo text-align afecta al contenido de una etiqueta,
no a la etiqueta en sí. Si aplicas ese estilo, por ejemplo, a un parrafo, lo que se alinea es el contenido, no la etiqueta:
<p>
A este espacio afecta el alineado</p>
Sin embargo, la etiqueta <img> es una etiqueta vacía, luego no tiene contenido, así que el text-align no le afecta. Si se pudiera poner:
<img>
ruta de la imagen</img>
si que funcionaría.
Para centrar una imagen, hay basicamente 2 formas:
La más correcta sería convertir a la imagen en un elemento de bloque (para que el navegador le asigne el salto de carro antes y después) y darle margenes automáticos, esto es:
img {
display: block;
margin: auto;
}
Sin embargo, esto no funciona en mi
odiado IE5.X, con lo que, el otro metodo, si bien menos correcto, no da problemas.
Este otro metodo sería, seguiendo la explicación de como funciona el text-align, asignarle dicha propiedad a una etiqueta que sea contenedora de la imagen, de modo que la imagen será el contenido afectado. Se puede hacer con <div> o <p> por ejemplo (etiquetas de bloque):
CSS
.centrar {
text-align: center;
}
(X)HTML
<p class="centrar"><img src="ruta" alt="lo que sea"></p>
Un saludo.