Hace tiempo hice una galeria en html, algo similar a lo que se ve en Facebook cuando clickas una imagen, se abre una ventana y en ella la imagen, yo hice lo mismo. Al tener muchas fotos de tamaños diferentes, para centrarlas verticalmente todas, usé el siguiente código:
Código:
El elemento padre es "#content_screen" y dentro de este, ".img_screen" la imagen. El truco estaba en indicarle al elemento padre un line-height igual al height (en este caso son 2 pixels menos, debido a borde de la imagen), y indicarle vertical-align middle a la imagen. Se centraba sin problemas, asta en IE8 o 7 funciona. #content_screen { width:650px; position:absolute; top:0px; left:75px; height:570px; line-height:568px; border:1px solid red; } .img_screen { border:1px solid white; vertical-align:middle; }
El probema viene ahora, trato de hacer lo mismo, una página completamente nueva, usando la misma técnica, pero por más que lo intento de todas las maneras, no sale, el código es sencillamente el mismo, solo que con medidas diferentes, destacando que en el código antiguo usaba imagenes bastante más pequeñas que el elemento padre, en el código de ahora las imagenes que uso son relativamente más grandes. Este es el código:
Código:
He probado también con display:inline; y nada. Ojalá tuviera el telefono del anuncio de McDonals, para llamarme a mi mismo y preguntarme como demonios hice eso :/ .div { width:850px; height:700px; line-height:700px; position:absolute; margin-left:25px; display:block; } .img { vertical-align:middle; }