Re: [Ovillo] Duda centrado vertical

Daniel G.B. Tue, 11 Jan 2005 23:58:15 -0800

At 17:01 11/01/2005, you wrote:

tengo que alinear al centro un contenido dentro de un DIV de forma vertical,
Utilizo vertical-align: middle, pero no consigo el efecto deseado.

Si el DIV contenedor y el contenido tienen una altura fija, utiliza un PADDING-TOP o un MARGIN-TOP con el valor que mejor se ajuste y ya está. Tu DIV mide 100px, el contenido 50px. El margen superior debe medir 25px... :P Si se trata de una sóla línea de texto, si le pones un LINE-HEIGHT del mismo tamaño que el DIV contenedor, se ajustará a la mitad.

Si los contenidos son variables, es otro cantar.

Googleando he visto este ejemplo [1] , aunque no he utilizado una técnica así nunca (no me convencen los margenes negativos).  El top -2em provoca que el contenido suba 2 lineas y se alinee al centro. Eso sí, el texto debe tener exactamente 4 líneas de texto.

Otro ejemplo utilizando DISPLAY: TABLE y DISPLAY: TABLE-CELL con tres DIV's [2] . No deja de ser interesante el uso que hace de [id] (indica que dicha etiqueta debe contener el atributo ID) para navegadores modernos:

<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>

[1] http://archivist.incutio.com/viewlist/css-discuss/2747 [2] http://www.jakpsatweb.cz/css/css-vertical-center-solution.html


_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org

Re: [Ovillo] Duda centrado vertical

Responder a