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

Anuncios

~ por inforlandia en abril 17, 2009.

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 )

Google+ photo

Estás comentando usando tu cuenta de Google+. 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 )

w

Conectando a %s

 
A %d blogueros les gusta esto: