Centrar texto en vertical

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.




Josep Viciana

Programador de 27 años con una década de experiencia como programador. interesado en el diseño, ilustración y nuevas tecnologías. Dedicado desde siempre a la programación Web y desde hace algunos años también a la móvil.

1 comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *