Problema con centrado vertical de bloques (div)

[iperez1960]

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 la dirección de una demo de una galería con los elementos centrados en horizontal pero no en vertical.

Como el sistema no me deja poner la url (es mi primer mensaje) lo "oculto un poco". Espero no se castigado por ello y que se entienda. Disculpas si comento alguna incoreccion.

inakiperez(punto)260mb(punto)com

¿Alguna ayuda o sugerencia?

!!Muchas gracias por adelantado!!

[jomaruro]

Hola.

¿Has probado con vertical-align: middle;?.

Saludos.

[Dalvenjha]

Eso es CSS3 y no funciona en todos los navegadores, ojalá que lo implemente ya!! nos ahorraría mucho a todos.

Saludos!!

[TylinTylyn]

Y SI PRUEBAS CON MARGIN : auto o ala caja principal relative y al elemento q deseas centrar darle absolute position y meterle top y left 50% 50% o no se _

[rb3m]

La técnica del margen al 50% la puedes ver en http://robertobaca.net/ejemplos/centradovertical.htm (checa el código)

Es un hack, pero es la solución más sencilla usando css. Para cosas más complicadas tal vez necesitarás usar javascript.

[Mikmoro]

El vertical-align: middle no es que sea CSS3, sino que depende del posicionamiento con display table y display table-cell, que es lo que realmente no entienden todos los navegadores (como de normal, lo entienden todos menos IE6).

Si tus miniaturas tienen un tamaño fijo puedes usar la técnica que te propone rb3m.
Si no es así, mira aquí: en la columna izquerda encontrarás tres técnicas para el centrado vertical que son compatibles con IE6.

[iperez1960]

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 "."):

inakiperez(punto)260mb(punto)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!