Foros del Web » Creando para Internet » CSS »

Problema con vertical-align y line-height

Estas en el tema de Problema con vertical-align y line-height en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/02/2012, 09:58
Avatar de Adbane  
Fecha de Ingreso: junio-2011
Mensajes: 86
Antigüedad: 12 años, 10 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
  #2 (permalink)  
Antiguo 17/07/2012, 17:15
 
Fecha de Ingreso: julio-2011
Mensajes: 108
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: Problema con vertical-align y line-height

Hola, mira yo estoy con el mismo tema, por ahora, para una sola linea use siempre line-height y es verdad es el IE como siempre no es mas que un dolor de cabeza, y ahora lo que estoy usando es display:table para el div que contiene y display:table-cell para el contenido tambien por supuesto vertical-align:middle para el contenido, no lo probé de muchas maneras, pero tengo entendido que funciona con todo.. yo tengo un div con un span dentro y funciona, asique supuestamente con otro div o img o lo que sea deberia funcionar.

Saludos

Última edición por nicolasroma; 17/07/2012 a las 17:26

Etiquetas: line-height, vertical-align, centrar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:31.