Height procentual depende de anchura de la pagina?

Citar

Escrito el 20 Ago 2012 11:54 pm

Buenas
Estoy creando una aplicación móvil y quiero que una imagen quede justo en el medio de la página.
He conseguido centrarla horizontalmente (ponerla no pegada a la izquierda) poniéndole en el div un "align = 'center'" (y es que la imagen va a variar de anchura en el tiempo y con otros métodos no me vale ya que la centra mediante los laterales de la imagen y no por el eje central).

El problema es para centrarla verticalmente. Tendría que ser fácil ya que además la altura de la imagen no tiene que variar. Pero el problema es que cuando le pongo una atributo css height porcentual el navegador (Chrome) lo hace porcentual respecto a la amplitud de la pantalla. Así que en un teléfono en modo vertical se vería en el centro pero si el teléfono está apaisado se va fuera de la pantalla.

Alguna idea?

Gracias

Por Ourii

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 21 Ago 2012 02:55 pm

Contrario a lo que puedas creer, centrar verticalmente elementos HTML no es fácil porque HTML usa la alineación textual (de izquiera a derecha y de arriba hacia abajo) como en un editor de texto y en este sistema el alto de la "pagina" nunca está claro.

Parece evidente al ojo del observador que el alto debería ser el de la ventana pero no lo es. Una cosa es el alto de la ventana y otra es el alto del documento que contiene esa ventana.

Para lo que quieres hacer hay varias formas dependiendo de lo que necesites y cómo lo necesites.

Una forma de comenzar a probar cosas es primero que nada poner el tag <html> y el tag <body> al 100% en ambas dimensiones. Luego el <div> que estás usando poner height y line-height al 100% y vertical-align: middle;

Recuerda que cuando usas porcentajes ese porcentaje es relativo al elemento contenedor del elemento al que se lo aplicas. De forma tal que si el contenedor tiene una altura absoluta de cero, el contenido con height: 100%; pues será el 100% de cero, o sea cero!.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 21 Ago 2012 05:37 pm

Hola,
muy buena explicación pero no consigo que se me pongo centrado el div. Después de provar en mi proyecto sin éxito he creado una página sencilla, también sin éxito, pero quizá así puedas ver si he hecho algo mal:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ola{
width: 100%;
height: 100%;
line-height: 100%;
vertical-align: middle;
background-color: blue;
}
body{
width: 100%;
height: 100%;
background-color: red;
}
html{
width: 100%;
height: 100%;
}
</style>

</head>
<body>

<div id="ola">

<p>ola ola ola</p>
</div>
</body>

</html>

Si no me equivoco tu intención es hacer que una línea de texto ocupe como todo el contenedor y poner la imagen (un texto en la prueva rápida) en el medio con "vertical-align: middle".

Gracias por la ayuda

Por Ourii

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 21 Ago 2012 06:06 pm

Si necesitas centrarlo con respecto a la ventana, y como ultimo recurso puedes hacerlo con javascript; calculas el alto de la venta con jquery, $(window).height(), lo guardas en una variable, luego le restas el alto del div que vas a centrar y divides el sobrante en 2, aplicas ese valor como margin superior del div y listo, siempre estará centrado verticalmente respecto a la ventana.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

Front-end Developer

Citar

Escrito el 21 Ago 2012 08:31 pm

OK perfecto muy buena solución. Supongo que tendré que vigilar con la posible rotación de pantalla de los smartphones pero no creo que me sea difícil de solucionar.

Gracias!

Por Ourii

6 de clabLevel

Envíale un mensaje privado

Height procentual depende de anchura de la pagina?

Escribe una respuesta rapida