Reactjs实现-如何在导航栏中将内容居中

Question

我正在尝试在我的react项目中使用实体化框架制作导航栏，并且希望第一组链接位于导航栏的中心，第二组链接位于导航栏的右侧。我不确定如何执行此操作-辅助类“ left”和“ right”正在工作，但是当我尝试“居中”链接时，它默认位于导航栏的左侧。这是我正在使用的代码...

 <div className="App">
    <nav>
      <div class="nav-wrapper purple lighten-3">
        //I would like these links in the center
        <ul class="center">
          <li>
            <a href="sass.html">People</a>
          </li>
          <li>
            <a href="badges.html">Places</a>
          </li>
        </ul>
        //I would like these links on the right
        <ul class="right">
          <li>
            <a href="sass.html">Sass</a>
          </li>
          <li>
            <a href="badges.html">Components</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

我在类似的帖子中还添加了一些推荐的CSS：

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

这是我的沙箱：

https://codesandbox.io/s/tender-buck-ktzxe?file=/src/App.js

想知道是否有人可以帮助我。

谢谢！

Answer 1

要使所有链接都居中，您需要在center上使用div类而不是在ul上使用>

<div class="nav-wrapper center purple lighten-3">
要使右侧链接保持在右侧，可以使用位置absolute

.right{
  position: absolute;
  right: 0px;
}

Answer 2

您可以使用绝对定位，与Materialize用来使.brand-logo居中的方式相同>

ul.center {
  position: absolute;
  left:50%;
  transform: translate(-50%);
}