Centrando texto verticalmente
Una vez más vengo con una técnica que de tan simple dan ganas de llorar por no habérsenos ocurrido antes. Lo que mostraré ahora, es cómo lograr centrar verticalmente un texto a través de su contenedor. Esta es la clave, ya que se suele pensar que el texto mismo es el que debe tener la propiedad de alineado vertical pero la idea, al igual que el [artículo anterior de centrado horizontal][1], es que el contenedor permita hacerlo, así cualquier elemento que esté dentro pueda tener esta cualidad.
La clave: la propiedad line-height. Definiento un alto de línea fijo para el contenedor, podremos lograr que todos sus elementos queden centrados relativos a él, ya que al contrario de height, siempre sus elementos hijos quedarán centrados verticalmente. Esto funciona para cualquier etiqueta bloque: El CSS es el siguiente: O sea, si el contenedor es un , un [Ver ejemplo][2]{.verejemplo} El único problema… si… ese mismo… IE6 y las etiquetas de botones e . Como se darán cuenta, no lo hace del todo bien. Lo siguen IE7 y Opera. Pero hay una manera de solucionarlo mediante CSS pero sólo para IE7 y Opera: definir el alto fijo de los botones mediante height. Pero con IE6 no hay caso, no lo soluciona.. Otro detalle es que no funciona con imágenes [1]: http://www.csslab.cl/2008/03/11/esas-botoneras-centrandolas/ “Enlade en CSSLab a “Esas botoneras: centrándolas””
[2]: http://www.csslab.cl/ejemplos/centrado_vertical.html “Enlade en CSSLab a “Ejemplo Centrando Verticalmente””, , , etc.
li, td, p {
line-height: 100px;
} o un (pueden ser muchos otros), defino el alto de éste mediante line-height (en vez de hacerlo mediante height) y todos sus elementos de texto y botones quedarán automáticamente centrados verticalmente.
. Siento mucho si se decepcionaron leyendo estas últimas palabras… tiene sus limitaciones, pero puede salvar en algunas situaciones.