Centrar texto en vertical
- 29 julio 2009
- 1 comentario
- CSS.
Normalmente para tener un enlace con el texto centrado en vertical, uso un padding por arriba y por abajo, hasta que queda a la altura que necesito. Pero muchas veces he notado que aunque se vea bien en diferentes navegadores, en OS X se hace un pixel más alto. El pixel de diferéncia es por el clear type que utiliza OS X, que hace a la letra ocupar un pixel más de alto y hace que se puedan descuadrar algunas cosas.
La solución es fijar el alto de los enlaces en pixeles, darle padding a los laterales y centrar el texto verticalmente (sin paddings).
Y eso se hace con este CSS:
vertical-align:middle;
display:table-cell;
Por ejemplo:
#menu-horizontal ul li a{
color:#FFFFFF;
text-decoration:none;
padding:0px 10px 0px 10px;
border-right:1px solid #5f77af;
border-left:1px solid #293c69;
outline:none;
height:36px;
vertical-align:middle;
display:table-cell;
}
EDITO: No es compatible con Internet Explorer 6.