Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/02/2012, 09:58
Avatar de Adbane
Adbane
 
Fecha de Ingreso: junio-2011
Mensajes: 86
Antigüedad: 13 años, 5 meses
Puntos: 6
Pregunta Problema con vertical-align y line-height

Hola, tengo un problema que me gustaria solucionar, el caso es el siguiente:
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:
#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 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.

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:
.div {
	width:850px;
	height:700px;
	line-height:700px;
	position:absolute;
	margin-left:25px;
	display:block;
}
.img {
	vertical-align:middle;
}
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 :/
__________________
Diseñador web por amor al arte, o al HTML mejor dicho