Centrar menu en Foundation

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;

Centrar menu en Foundation