Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 05-dic-2005, 09:25   #1 (permalink)
Sirdawn ha deshabilitado el karma
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
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!!
Sirdawn está desconectado   Responder Citando
Antiguo 05-dic-2005, 09:54   #2 (permalink)
baccxus está en el buen camino
 
Avatar de baccxus
 
Fecha de Ingreso: mayo-2005
Ubicación: Panamá
Mensajes: 750
Enviar un mensaje por ICQ a baccxus Enviar un mensaje por MSN a baccxus Enviar un mensaje por Yahoo  a baccxus Enviar un mensaje por Skype™ a baccxus
Podrías poner tu código, pues no sabemos si usas "relative" o "absolute" ó puedes usar en el buscador vertical-align:

__________________
+ que electrónica
baccxus está desconectado   Responder Citando
Antiguo 05-dic-2005, 10:01   #3 (permalink)
Sirdawn ha deshabilitado el karma
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
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.
Sirdawn está desconectado   Responder Citando
Antiguo 05-dic-2005, 10:46   #4 (permalink)
furoya llegará a ser famoso muy prontofuroya llegará a ser famoso muy pronto
 
Fecha de Ingreso: noviembre-2002
Mensajes: 981
Hola todos :

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

alineación vertical

Centrar datos, tablas, textos,... en la vertical
furoya está desconectado   Responder Citando
Antiguo 05-dic-2005, 11:10   #5 (permalink)
baccxus está en el buen camino
 
Avatar de baccxus
 
Fecha de Ingreso: mayo-2005
Ubicación: Panamá
Mensajes: 750
Enviar un mensaje por ICQ a baccxus Enviar un mensaje por MSN a baccxus Enviar un mensaje por Yahoo  a baccxus Enviar un mensaje por Skype™ a 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
__________________
+ que electrónica
baccxus está desconectado   Responder Citando
Antiguo 06-dic-2005, 04:35   #6 (permalink)
Sirdawn ha deshabilitado el karma
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
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)
Sirdawn está desconectado   Responder Citando
Antiguo 06-dic-2005, 08:38   #7 (permalink)
baccxus está en el buen camino
 
Avatar de baccxus
 
Fecha de Ingreso: mayo-2005
Ubicación: Panamá
Mensajes: 750
Enviar un mensaje por ICQ a baccxus Enviar un mensaje por MSN a baccxus Enviar un mensaje por Yahoo  a baccxus Enviar un mensaje por Skype™ a 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,
__________________
+ que electrónica

Última edición por baccxus; 06-dic-2005 a las 08:43.
baccxus está desconectado   Responder Citando
Antiguo 08-dic-2005, 09:13   #8 (permalink)
Sirdawn ha deshabilitado el karma
 
Fecha de Ingreso: diciembre-2005
Mensajes: 26
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!!
Sirdawn está desconectado   Responder Citando
Antiguo 08-dic-2005, 14:14   #9 (permalink)
furoya llegará a ser famoso muy prontofuroya llegará a ser famoso muy pronto
 
Fecha de Ingreso: noviembre-2002
Mensajes: 981
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! ).
furoya está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 12:46.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93