Foros del Web » Creando para Internet » CSS »

Alineado vertical en una imagen...

Estas en el tema de Alineado vertical en una imagen... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2005, 10:25
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
Antigüedad: 12 años
Puntos: 0
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!!
  #2 (permalink)  
Antiguo 05/12/2005, 10:54
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Podrías poner tu código, pues no sabemos si usas "relative" o "absolute" ó puedes usar en el buscador vertical-align:

__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 05/12/2005, 11:01
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
Antigüedad: 12 años
Puntos: 0
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.
  #4 (permalink)  
Antiguo 05/12/2005, 11:46
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

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

alineación vertical

Centrar datos, tablas, textos,... en la vertical
  #5 (permalink)  
Antiguo 05/12/2005, 12:10
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Disculpa, pero esa es la medida de la imagen o la medida del div donde está?, tienes que poner la de los 2.

saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #6 (permalink)  
Antiguo 06/12/2005, 05:35
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
Antigüedad: 12 años
Puntos: 0
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)
  #7 (permalink)  
Antiguo 06/12/2005, 09:38
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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,
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 06/12/2005 a las 09:43
  #8 (permalink)  
Antiguo 08/12/2005, 10:13
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
Antigüedad: 12 años
Puntos: 0
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!!
  #9 (permalink)  
Antiguo 08/12/2005, 15:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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 ( Hola! ).
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:12.