Reactjs материализация - как центрировать контент в навигационной панели

Question

Я пытаюсь создать навигационную панель, используя структуру материализации в моем проекте реакции, и хотел бы, чтобы первый набор ссылок располагался в центре навигационной панели, а второй - в правой части навигационной панели. Я не уверен, как это сделать - вспомогательные классы "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

Вы можете использовать абсолютное позиционирование, точно так же, как Materialise использует его для центрирования .brand-logo

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

Codepen здесь .

Вот стили Материализация использует для центрирования .brand-logo:

nav .brand-logo.center {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

nav .brand-logo {
    position: absolute;
    color: #fff;
    display: inline-block;
    font-size: 2.1rem;
    padding: 0;
}

Answer 2

Чтобы сделать все ваши ссылки в центре, вам нужно использовать center класс на div вместо на ul

<div class="nav-wrapper center purple lighten-3">

Чтобы держать ваши правые боковые ссылки на правой стороне, вы можете использовать позиция absolute

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