Question

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

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

HTML

physicsBody

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

Answer 1

Materialise在所有float: left元素上附带nav ul li。如果您尝试将其置于标准Helper的中心位置，则无法正常工作。因此，除了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>

Answer 2

根据材料设计指南，官方答案可能是导航栏链接应左对齐或右对齐，以指示功能：https://material.google.com/layout/structure.html#structure-app-bar

然而，你可以用一种有点愚蠢的方式解决这个问题：

<div class="naxbar-fixed">
    <nav>   
        <div class="brand-logo center">
            <ul>
                <li class="active"><a href="/page1">page1</a></li>
                <li><a href="/page2">page2</a></li>
            </ul>
        </div>
    </nav>
</div>

通过将导航栏包装在带有品牌徽标和中心的div中，您可以通过实践来认为菜单是徽标，并且可以使链接居中。

我相信这样的菜单会在足够小的屏幕上消失，并且可能无法按照您的意愿行事。

您可以使用materialize标签：

<div class="naxbar-fixed">
    <nav>
        <div class="white-text">
            <ul class="tabs center" style="width:20em;">
                <li class="tab col s6 active>
                    <a href="/page1">page1a>
                </li>
                <li class="tab col s6">
                    <a href="/page2">page2</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

这样做的好处是可以为每个链接提供相同的宽度，但可能需要您做一些额外的样式，如果您关注移动设备，可能需要更多的工作。

Answer 3

所以，我通过将以下转换添加到我的UL元素来解决这个问题：

nav ul{
  transform: translateX(32%);
  webkit-transform: translateX(-32%);
}

由于我的链接占据屏幕的大约1/3，因此转换是将它们移动到左边的第3个。

Answer 4

当我在导航中添加下拉菜单时，删除浮动并将文本对齐设置为中心对我来说并不是最好的解决方案。一些下拉链接与左侧对齐，一些与中心对齐。我认为一个简单的解决方案是使用 display: flex 和 justify-content: center 创建一个类。我将它与 hide-on-med-and-down 类一起放在 ul 中，这样居中就不会影响移动菜单按钮的位置。

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {});
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, {
        coverTrigger: false
    });
});

.nav-center {
  display:flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<!-- Dropdown Content -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li><a href="#!">three</a></li>
</ul>
<!-- Navbar  -->
<nav>
  <div class="nav-wrapper">
        <ul class="nav-center">
          <li><a href="#">Link</a></li>
          <!-- Dropdown Trigger -->
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
  </div>
</nav>

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

4 个答案: