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

Question

我正在尝试使用materialize构建一个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上,只有链接的悬停行为和背景颜色的下划线,

Answer 1

Materialise附带float: left所有nav ul li元素.如果您尝试将它们与标准助手对中,则无法使用.所以,除此之外text-align: center,你必须将其设置float为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>