Centrar imagen verticalmente

[tempto]

Hola a tod@s, he mirado los post de la web sobre el tema, pero las soluciones que dan a otros usuarios es para centrar una sola imagen, modificando padding/margin o añadiendo otro div/tabla..., pero lo que necesito es centrar cualquier imagen en el div, porque se cargan unas cuantas y tienen diferentes tamaños.

El centrado horizontal lo tengo, pero el vertical me está costando...

Éste es el código que he utilizado:

Código CSS:

.contenedor {
    width:195px;
    height:314px;
    float:right;
}
 
.contenedor img {
    display:block;
    margin:auto;
}
 

[2102325]

Bueno, a ver si esto te ayuda, segun entiendo tienes un div contenedor de imagenes diferentes con diferentes tamaños, por lo menos es lo que dice tu codigo...

ahora bien, si las imagenes son de diferentes dimensiones las que se cargan en div creo que no tienes porque darle dimensiones a tu div contenedor a menos que que la imagen mayor que cargues tiene esas dimensiones que estas indicando.... Mi idea es la siguiente

.contenedor {
width:195px;
height:314px;
float:right;
position:absolute;
}

.contenedor img {
display:block;
position: relative; //para que sea relativa al elemento contenedor
top:50%; // para que tome el 50% del height de su contenedor
left:50%; // para que tambien tome el 50% de su width
}

Prueba con esto me parece que deve resolver tu problema...

Saludos desde RD

[tempto]

No funciona :s

El div tiene un tamaño porque la página tiene un tamaño fijo, lo que cambia es sólo el contenido, pero las imágenes, aunque prácticamente tienen el mismo ancho, no tienen la misma altura.

Al div contenedor no puedo añadirle la propiedad

Código CSS:

position:absolute;
 

porque se descuadra del diseño, la capa está colocada a la derecha, y con esto se va a la izquierda.

[DragonX]

probá esto:

Código CSS:

.contenedor {
    width:195px;
    height:314px;
    float:right;
    text-align:center;
    vertical-align:middle;
}
 
.contenedor img {
    display:block;
    margin:auto;
}
 

Espero funcione

[tempto]

tampoco funciona

[w0rldart]

Código:

.contenedor {
    width:195px;
    height:314px;
    float:right;
}
 
.contenedor img {
    position: absolute;
    top: 50%;
    height: 100%;
    margin:auto;
}

Pero deberia de bastar con poner vertical-align:middle;

Eso deberia de ir bien, yo

[tempto]

Con el top y el height la imagen se ve descomunal ocupa la pantalla entera del navegador

[tempto]

alguien tiene alguna idea?

[alexk]

Solo se me ocurre esta solucion...
http://www.araudi.net/ejemplos/centr...lay_table.html

pero no funciona en IE... amenos que uses tablas de verda... (<table>) :S

[tempto]

la única pega es que en explorer se pega al lateral izquierdo, pero se centra, lo he solucionado añadiendo padding con un hack, para que sólo le lea explorer, y además valida

Código CSS:

padding-left:10px\9;
 

muchas gracias!