如何对齐标签- materialize.js？

Question

我使用materialize.js生成某种Tabbar滑块，如下面的示例所示：

​

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


<ul style="position: fixed; top: 15%; height: 20%" class="tabs">
  <li class="tab">
    <a href="#a">LONG TEXT 123456789012345</a>
  </li>
  <li class="tab">
    <a class="active" href="#b">SHOULD BE CENTERED</a>
  </li>
  <li class="tab">
    <a href="#c">...</a>
  </li>
</ul>

<div id="a" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 1 </div>
<div id="b" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 2 </div>
<div id="c" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 3 </div>

​

但是，水平对有很大的麻烦，second Tab称为“应该居中”。我不知道如何将这个TAB准确地移动到屏幕的中间，因为添加了以下属性：

vertical-align: center

或

text-align: center

似乎一点用都没有。

编辑：

所以我希望任何人都能帮助我。先谢谢你，简

Answer 1

和往常一样: Flex是我们的主人和救世主:)

制作你的ul{ display : flex }，然后用li {flex-basis : 33.33% }给每个孩子三分之一的宽度

​

ul.tabs {
    display : flex;
}

li.tab {
   flex-basis : 33.33%;
   border : blue dashed 1px;
}

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


<ul style="position: fixed; top: 15%; height: 20%" class="tabs">
  <li class="tab">
    <a href="#a">LONG TEXT 123456789012345</a>
  </li>
  <li class="tab">
    <a class="active" href="#b">SHOULD BE CENTERED</a>
  </li>
  <li class="tab">
    <a href="#c">...</a>
  </li>
</ul>

<div id="a" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 1 </div>
<div id="b" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 2 </div>
<div id="c" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 3 </div>

​