Hay momentos en el cual necesitemos ó necesitaremos que nuestro menú de navegación (nav) este centrado en nuestra pagina web, hay distintas forma de hacerlo desde los float, hasta ahora el nuevo display:inline-block; que nos trae CSS3 con una manera menos engorrosa para centrar nuestro menu.
Acá presento una forma muy fácil y sencilla de centrar los elementos ul li dentro de un nav, acá dejo un ejemplo con sus respectivos codigos html y css3.
En la parte inferior de este articulo usted podrá ver la demostración en vivo.
Colocamos el siguiente código html dentro de tu menú de navegación «nav»
<nav> <ul> <li><a href="#link01">Botón Centrado 01</a></li> <li><a href="#link02">Botón Centrado 02</a></li> <li><a href="#link03">Botón Centrado 03</a></li> </ul> </nav>
colocamos el CSS
li{
list-style: none;
}
nav {
text-align: center;
}
nav ul {
display: inline-block;
margin: 0;
padding: 0;
/* Para IE 7*/
zoom:1;
*display: inline;
}
nav li {
float: left;
padding: 2px 5px;
border: 1px solid black;
background-color:#CCC;
margin: 50px;
border-radius: 5px;
}
nav li a{
text-decoration: none;
font-family: century gothic;
color: #000;
}
nav li a:hover{
color: #fa8b09;
}
