¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

[davidj]

Hola!

Estoy intentando centrar una imagen (tanto horizontal como verticalmente) que se encuentra dentro de un DIV y no acabo de conseguirlo. La única manera que he podido es poniendola como fondo del DIV pero no se.., me gustaría más hacerlo "normal"..

¿ ALguien sabe alguna forma sencilla de hacerlo ?

Gracias de antemano!!

[sanxuan]

La manera más simple usando CSS para centrar horizontalmente sería usar en el div text:align:center.
Suponiendo que el div tenga una altura fija mayor que el tamaño de la imagen puedes usar el siguiente CSS para centrar la imagen tanto horizontal como verticalmente suponiendo que tuviese 400x400px:
{
position:absolute; /*El div debe tener la propiedad position distinta de static*/
top: 50%;
left:50%;
margin-top: -200px; /* El valor 200 es ficticio, debes cambiarlo en cada caso por la mitad de la altura de tu imagen*/
margin-let: -200px;/* El 200 deberás sustituirlo por la mitad del ancho de la imagen */
}
Esto mismo sirve para centrar cualquier elemento dentro de otro a condición de saber el ancho y alto del que va dentro.

[jomaruro]

Hola:

Iniciado por sanxuan

La manera más simple usando CSS para centrar horizontalmente sería usar en el div text:align:center.

La mejor manera de centrar horizontalmente es margin:0 auto, text-align sirve para centrar texto nada más, salvo en versiones antiguas de IE.

Mírate este ejemplo de Mikmoro centrado vertical 2, en el ejemplo centra texto pero podrás adaptarlo para centrar la imagen.

Saludos.

[davidj]

Sanxuan funciona perfecto!, jomaruro le daré un vistazo..

Pero ahora me surge una duda, me interesaría realizar una galeria de imagenes y necesitaría flotar a la izq para que se añadan una al lado de la otra, pero con position absolute no puedo ( o no se)..

¿Sabrias como se hace?

Te dejo el código que utilizo:
http://www.bpaste.net/show/13443/

Gracias!!

[jomaruro]

Hola:

Empieza por cambiar la posicion absoluta por la relativa. Para que entiendas mejor como funciona el posicionamiento en CSS empieza por echarle un vistazo a la guía de migración que Mikmoro aporto en el foro de CSS.

Te servirá ahora y en un futuro porque la posición absoluta da más problemas que ventajas y solo debe utilizarse en unos pocos casos.

Saludos.

[davidj]

ok lo tendré en cuenta, le echaré un vistazo al manual también..

[sanxuan]

Debo corregirte Jomauro.
Una imagen es en principio un elemento en línea, como el texto, y para centrarla dentro de un div, basta con declarar text-align:center en ese div (no en la imagen).
Para centrar el contenedor div en la página o en otro contenedor, usa margin:0 auto, ya que es un elemento de bloque.

[jomaruro]

Hola:

Iniciado por sanxuan

Debo corregirte Jomauro.
Una imagen es en principio un elemento en línea, como el texto, y para centrarla dentro de un div, basta con declarar text-align:center en ese div (no en la imagen).
Para centrar el contenedor div en la página o en otro contenedor, usa margin:0 auto, ya que es un elemento de bloque.

sanxuan, tienes razón. Debo reconocer mi error no me di cuenta de que era una imagen y no un div.

davidj, prueba esto:

Código CSS:

#recuadro{
    position:absolute;
    height: 280px;
    width: 480px;
    border: 1px solid #999999;
    display: table;
}
        
#foto {
    position:relative;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}
 

Saludos.