html - 我如何使用 Materialize 创建一个带有居中对齐链接的导航栏？

Question

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

我一直在向 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

Materialize 带有 float: left在所有nav ul li元素。如果您尝试将它们与标准 Helper 居中, 它不会起作用。所以，除了text-align: center , 你必须设置 float至 none .但是，这将使所有按钮堆叠在一起；要解决这个问题，只需使用 <li>元素显示内联和 <a>元素显示内联 block 。

我建议这样创建一个新类:

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>