Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Alineado vertical en una imagen... (http://www.forosdelweb.com/f53/alineado-vertical-imagen-355195/)

Sirdawn 05/12/2005 10:25

Alineado vertical en una imagen...
 
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 05/12/2005 10:54

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

http://usuarios.lycos.es/baccxus/busqueda.gif

Sirdawn 05/12/2005 11:01

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 05/12/2005 11:46

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 05/12/2005 12:10

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 06/12/2005 05:35

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 06/12/2005 09:38

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 08/12/2005 10:13

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 08/12/2005 15:14

Cita:

...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 ( :adios: Hola! ).


La zona horaria es GMT -6. Ahora son las 04:26.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.