如何使用 Materialise 创建具有居中对齐链接的导航栏？

我正在尝试使用 Materialise 构建一个顶部有导航栏的 1 页垂直滚动网站，现在，Materialize 仅具有用于向左或向右对齐链接的类，徽标可以居中对齐，但不能居中对齐链接本身，

我一直在向 UL 和包装 div 添加中心对齐和中心类，并且尝试使用网格但没有成功，这是我的代码：

HTML

   <div class="navbar-fixed"  >
    <nav id="nav_f" class="transparent z-depth-0" role="navigation" >
        <div class="container">



            <div class="nav-wrapper"  >

             <div class="row s12">

            <div>
                  <ul class="hide-on-med-and-down navbar " >
                      <li><a id="desk-about-us" href="#about-us">ABOUT US</a></li>
                      <li><a href="#how-it-works">HOW IT WORKS</a></li>
                      <li><a href="#comments">COMMENTS</a></li>
                  </ul>
                </div>
              </div>

                <ul id="nav-mobile" class="side-nav side-nav-menu ">
                    <li><a href="#about-us">ABOUT US</a></li>
                    <li><a href="#how-it-works">HOW IT WORKS</a></li>
                    <li><a href="#comments">COMMENTS</a></li>
                </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse right"><i class="material-icons">menu</i></a>
            </div>

       </div>
    </nav>
</div>

在我的 css 上，只有链接的悬停行为和背景颜色的下划线，

Materialize 带有一个float: left on all nav ul li元素。如果你尝试将它们与标准居中Helper http://materializecss.com/helpers.html，它不会起作用。所以，除了text-align: center，你必须设置它float to none。然而，这将使所有按钮堆叠在一起；要解决这个问题，只需<li>元素内联显示并且<a>元素显示内联块。

我建议创建一个新类：

nav.nav-center ul {
    text-align: center;
}
nav.nav-center ul li {
    display: inline;
    float: none;
}
nav.nav-center ul li a {
    display: inline-block;
}

使用标准 Materialise<nav>组件与.nav-center上面的类：

<nav class="nav-center" role="navigation">
    <div class="nav-wrapper container">
        <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/help">Help</a></li>
        </ul>
    </div>
</nav>