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; }