Hace unos días me encontré con un excelente artículo en donde explican como crear un menú horizontal, pero que esté realmente alineado de forma vertical y además centrado.

A mí me ha pasado que hago un menú pero no me queda centrado completamente, ya por dicha con este pequeño tutorial puedo hacerlos como siempre quise. Y es que es muy fácil crear un menú con div y todo pero realmente no es nada eficiente hacerlo así, porque si uno va agregar un nuevo div para el menú entonces debe cambiar el css. Así que se vuelve mucho más complicado.

El XHTML

Ok, algo muy sencillo una lista sin ordenamiento (cuando es con ordenamiento no es ul, sino ol). Y esta lista tiene un id="nav".

<ul id="nav">
	<li><a href="/">Inicio</a></li>
	<li><a href="/acerca/">Acerca</a></li>
	<li><a href="/trabajo/">Trabajo</a></li>
	<li><a href="/clientes/">Clientes</a></li>
	<li><a href="/contacto/">Contacto</a></li>
</ul>

El CSS

#nav{  border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;}

#nav li{  display:inline;}

#nav a{  display:inline-block;  padding:15px;}

Ok, ahora lo que tenemos es que el #nav es el id="nav" que habíamos hablado antes, este tiene una propiedad de borde de 1px de color gris, no tiene un estilo de lista, y el texto está alineado al centro.

Y además tenemos el #nav li que tiene una propiedad de display:inline; eso significa que los elementos li van a tener esa misma propiedad. Y por último los a (que son los links por así decirlo) van a tener la propiedad de display:inline-block; con un padding de 10px, lo cual hace que se separen más de sus elementos o “links”.

Para el Demo que he puesto le he cambiado los atributos de a, y he puesto los siguientes para que se vean mejor.

a {color:#2081b1; text-decoration:none;	font-weight:bold;}
a:hover{text-decoration:underline;}

Demo

Demo del menú horizontal, verticalmente centrado