¿El mejor método? El método 3: consiste en introducir un div vacio antes del div con el contenido. Este div vacío tendrá de altura el 50% menos la mitad de la altura del contenido. Para quitarle la mitad de la altura del contenido se emplea la propiedad CSS margin-bottom. ¡Genial!
<div id="top">
Título de la página
</div>
<div id="floater"></div>
<div id="content">
El contenido que se quiere centrar verticalmente
</div>
Y el CSS:
#floater {float:left; height:50%; margin-bottom:-120px;}
#top {float:right; width:100%; text-align:center;}
#content {clear:both; height:240px; position:relative;}
3 comentarios:
Muy buenas, ¿sabes si hay algún método para poder referenciarte a los estilos de otras clases?
Por ejemplo aquí quieres una altura igual al 50% menos la mitad de la altura del contenido, que por ejemplo fuera:
div#floater
{
height: 50%-div#content.height/50;
}
Qué ocurriría con las unidades absolutas? no inclumpliría algún criterio de accesibilidad el definir el alto en px?
Desde mi ignorancia al respecto lanzo la pregunta.
Gracias y Felicidades por el blog.
Respecto a la pregunta de QuarK, yo también he tenido "esa necesidad" alguna vez y, por lo que he investigado y leido, no es posible. Quizás en CSS3 o posteriores versiones sea posible, por ahora no.
Respecto a la pregunta de Ignatius, siempre se ha recomendado emplear unidades relativas por dos razones (relacionadas):
a) Para adaptar el tamaño de los elementos al tamaño del dispositivo de visualización (más correctamente, al "view port", a la ventana del navegador).
b) Si se adapta a distintos dispositivos, se adapta a distintos usuarios --> Lo hacemos accesible.
El principal problema de accesibilidad que ocasionan las unidades absolutas como el pixel es que los usuarios con problemas de visión (visión baja) lo pueden ver pequeño y al intentar aumentar su tamaño, lo siguen viendo pequeño. En realidad, esto ya no es un problema prioritario, porque la mayoría de los navegadores modernos realizan un zoom completo de la página (no aumentan sólo el texto, lo aumentan todo). Así que, ya no tenemos problema.
Sin embargo, la razón a) sigue existiendo: en este ejemplo, al usar unidades absolutas, un usuario que tenga una resolución de 1600px verá la página "vacía" en comparación con un usuario que tenga 1024px y la sensación será de que la página "no se ve bien".
Publicar un comentario