Comunidad de diseño web y desarrollo en internet online

Problema con centrado vertical de bloques (div)

Citar            
MensajeEscrito el 21 Feb 2009 12:22 am
Hola:

A ver si alguien me puede echar un cable. Estoy desarrollando una herramienta de publicación de galerías de fotos y deseo que los enlaces a cada foto sea una imagen reducida que se muestre centrada horizontal y verticalmente en su contenedor, un DIV. El centrado horizontal es facil, pero con el vertical no veo la forma. Pongo un enlace a una demo de una galería con los elementos centrados en horizontal pero no en vertical.

Galeria de imágenes

¿Alguna ayuda o sugerencia?

!!Muchas gracias por adelantado!!

Por iperez

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Feb 2009 01:07 am
Tendrias que darle un estilo a cada imagen, algo como el siguiente

.claseParaCadaImagen {
position: absolute;
height: 50px; /* aqui colocas la medida de la imagen, usamos 50 como ejemplo*/
top: 50%;
margin-top: -25px; /*valor negativo de la mitada de la altura. -(50/2) */
}

El pero que veo, es que tendrias que darle una clase a cada imagen si son de distintos tamaños. Espero te sirva, avisanos.

Por eseceve

26 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Feb 2009 01:13 am

eseceve escribió:

Tendrias que darle un estilo a cada imagen, algo como el siguiente

.claseParaCadaImagen {
position: absolute;
height: 50px; /* aqui colocas la medida de la imagen, usamos 50 como ejemplo*/
top: 50%;
margin-top: -25px; /*valor negativo de la mitada de la altura. -(50/2) */
}

El pero que veo, es que tendrias que darle una clase a cada imagen si son de distintos tamaños. Espero te sirva, avisanos.

En caso de que las imágenes varíen de imagen puedes crear un CSS desde PHP que se ajuste a los valores.
Creo que se debería poder.

Por JaLeRu

Claber

1913 de clabLevel

7 tutoriales

Genero:Masculino  

Existo

firefox
Citar            
MensajeEscrito el 02 Mar 2009 01:51 pm
Finalmente resuelto el problema añadiendo un contenedor para el centrado (class='centrado') y con un pequeño hack para solventar la incompatibilidad entre navegadores.

La solución la muestro en la página siguiente(sustituir "(punto)" por "."):

http://inakiperez.260mb.com/

El css está en el propio código de la página.

¡Muchas gracias a todos por vuestras respuestas y por dedicarme vuestro tiempo!

Por iperez

1 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.