jul
29
2009

Centrar un texto verticalmente [ line-height ]

centrar verticalmente con css

La propiedad line-height, nos permite alinear elementos verticalmente que esten dentro de un contenedor con una altura fija o bien “preestablecida”, y haci hacer que queden “centrados vericalmente” todos los elementos hijo del contenedor.

Ejemplo

1
2
li  {height: 50px;}
li a{line-height: 50px;}

la altura del “line-height” debe ser relativa a su contenedor.

Algunos valores de esta propiedad son:

normal
sera interpretado… como el predeterminado por el navegador

number
este multiplica el tamaño de fuente para establecer la altura de linea

length
Un salto de línea en px, pt, cm, etc…

%

sera interpretada la altura de línea en porcentaje con el tamaño de la fuente establecida

inherit
simplemente hereda el salto de linea… (IE8 y sus anteriores no lo soportan)

Nota: No funciona con imagenes… y da problemas en IE6… <button> e <input />… recomiento utilizarlo… en zonas especificas como en menus… o bien trozos de contenidos… para hacer mas comoda la lectura… enfin… debemos considerarlo para lo que es y sirve… para centrar textos perticalmente y dar saltos de linea…

Leave a comment

Patrocinador

Siguenos

Suscribete

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.

Correo @zoneartcss.com

Obtén una cuenta de @zoneartcss.com gratuita