Este post indicará la manera de como centrar menu en Foundation.
Por defecto Foundation no permite centrar un menú en su framework.
Tenemos el siguiente marcado html:
<nav id="mi_menu" data-topbar=""> <ul> <ul> <ul><!-- Title Area --></ul> </ul> </ul> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <ul> <li><a><span>Menu</span></a></li> </ul> <section> <ul> <li><a href="#">HOME</a></li> <li><a href="#" target="_blank">BLOG</a></li> <li><a href="#" target="_blank">SHOP</a></li> </ul> </section></nav>
Para centrar el menú podemos utilizar el siguiente código en css:
@media only screen and (min-width: 40.063em) { #mi_menu { width: 100%; height: 3em; margin: 0; text-align: center; } #mi_menu .nav-bar { height: auto; margin: 0; padding: 0; display: inline-block; } }