Alineado vertical en una imagen...

[Sirdawn]

Hola a todos.

Tengo un DIV en el cuál incluyo una imagen (la imagen es verticalmente más pequeña que el DIV) y me gustaría centrarla verticalmente. He incluido dentro del CSS correpondiente el atributo "vertical-align: middle"... pero todo sigue igual que antes. Me lo alinea en el top.

Alguien me puede echar un cable?? Gracias!!

[baccxus]

Podrías poner tu código, pues no sabemos si usas "relative" o "absolute" ó puedes usar en el buscador vertical-align:

[Sirdawn]

Ciertamente baccxus. Aquí pego ese DIV:

#photo
{
float: left;
height: 348px;
text-align: center;
width: 565px;
}

Tengo un cuadrado de esas dimensiones y dentro colocaría la imagen. Ahora mismo la alineación horizontal centrada me sale bien... pero el "vertical-align: middle;" no me hace ningún efecto al querer también colocar la imagen centrada verticalmente.

He buscado por la web y no he encontrado nada.

[furoya]

Hola todos :

Aquí hay un par de enlaces, pero sé que existen más.

alineación vertical

Centrar datos, tablas, textos,... en la vertical

[baccxus]

Disculpa, pero esa es la medida de la imagen o la medida del div donde está?, tienes que poner la de los 2.

saludos

[Sirdawn]

Buenas, y gracias furoya por los enlaces... pero siempre hablan sobre tablas y todo lo relativo a la alineación vertical no funciona; tags: valign, vertical-align y height. Nada de nada.

Con respecto a mí código:

Código:

#photo {
   float: left;
   height: 348px;
   text-align: center;
   width: 565px; }

La imagen iría insertada dentro de ese DIV. Por tanto, la imagen es más pequeña que las dimensiones ahí puestas (565x348).

Gracias!! (y por lo que veo en otros hilos, no soy el único con este problema)

[baccxus]

primero le pones a lo que ya tienes

Código:

position:relative

y luego haces esto: (Ejemplo con una imagen de 70px de alto x 50px de ancho)

Código:

#photo img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px; /*la mitad de alto de la imagen*/
margin-left: -25px; /*la mitad de ancho de la imagen*/
}

Saludos,

[Sirdawn]

Muchas gracias baccxus por tu ayuda.

El código que me has pasado funciona perfectamente, pero eso siempre vale cuando sabemos el tamaño exacto de la imagen a visualizar. En mi caso, es para hacer una galería de fotos donde las dimensiones pueden ser diferentes, pero siempre sin salirse del DIV #photo.

Alguna idea para poder hacer ésto?? Gracias!!

[furoya]

...Buenas, y gracias furoya ...

De nada, Sirdawn. Si miras mejor el contenido de los enlaces verás que hay varios ejemplos y trucos para alinear verticalmente sin tablas. Hasta vas a encontrar el ejemplo de baccxus ( Hola! ).