Centrar imágenes en CSS

Uno de los problemas que he encontrado a la hora de diseñar con CSS, es centrar las imágenes. Así es, tan simple como eso, lo que se solucionaba con un simple <center></center> en HTML, usando css no parece tan sencillo. Soluciones?

Pues existen dos soluciones posibles (a lo mejor hay más pero son las únicas que he probado)

1- Asignamos a la etiqueta img la propiedad de “elemento de bloque” y al “margin” el valor “auto”, de esta manera el navegador asignará margenes proporcionales al espacio donde está contenida la imagen.

img { display: block; margin: auto; }

Lamentablemente esta solución no es viable en Internet Explorer (para variar), lo cual nos fuerza a buscar otra manera de hacerlo.

2- Esta es la manera como vengo haciéndolo, no es la más elegante pero funciona, para eso le daremos la propiedad text:align-center al cuadro contenedor de nuestra imagen, por ejemplo:

<div style="text-align:center"><img src="http://direccion/de/la/imagen.jpg"/></div>

Con lo cual habremos centrado la imagen.

Fuente: http://blog.almadark.com

~ por inforlandia en Abril 17, 2009.