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.

Comentarios (1)

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.