Question

我有一个使用MaterialiseCSS制作的导航栏，我想知道如何使底部居中。这是我的代码：

    <nav class="nav-extended">
    <div class="nav-wrapper container">
      <a href="#!" class="brand-logo center">TEMP LOGO TEXT</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="nav-content container">
      <ul class="tabs tabs-transparent">
        <center>
        <li class="tab"><a href="#">Partnerships</a></li>
        <li class="tab"><a href="#">Courses</a></li>
        <li class="tab"><a href="#">Work Schemes</a></li>
        <li class="tab"><a href="#">Lesson Plans</a></li>
        <li class="tab"><a href="#">Guidance</a></li>
        <li class="tab"><a href="#">Help</a></li>
        <li class="tab"><a href="#">Apply</a></li>
        </center>
      </ul>
    </div>
</nav>

以下是目前的图片。（我尝试使用它不起作用的标签）

Answer 1

<center>标签不再支持HTML5，你应该把它拿出来。

使用materialize中的最新版本并使用以下内容，我可以将这些标签放在中心

.tabs {
  display: flex;
  justify-content: space-between;
}

Flexbox完整指南

参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.tabs {
  display: flex;
  justify-content: space-between;
}

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>


<nav class="nav-extended">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo center">TEMP LOGO TEXT</a>
    <ul class="left hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="nav-content container">
    <ul class="tabs tabs-transparent">
      <li class="tab"><a href="#">Partnerships</a></li>
      <li class="tab"><a href="#">Courses</a></li>
      <li class="tab"><a href="#">Work Schemes</a></li>
      <li class="tab"><a href="#">Lesson Plans</a></li>
      <li class="tab"><a href="#">Guidance</a></li>
      <li class="tab"><a href="#">Help</a></li>
      <li class="tab"><a href="#">Apply</a></li>
    </ul>
  </div>
</nav>

Answer 2

添加此课程：在UL之前的DIV {/ 1}}

我怎样才能将这个第二个导航栏放在marerializecss中心？

2 个答案:

Flexbox完整指南