如何对齐tab - materialize.js？

Question

我使用materialize.js生成某种Tabbar滑块，就像您在下面的示例中看到的那样：

＆＃13;

＆＃13;

<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>
  

＆＃13;

＆＃13;

＆＃13;

但是我在水平居中时遇到了大问题second Tab被称为＆＃34;应该是中心＆＃34;。我不知道如何将此TAB精确地移动到屏幕中间，因为添加了属性：

vertical-align: center

或

text-align: center

似乎根本不起作用。

编辑： 所以我希望有人能够帮助我。提前感谢一百万，简

Answer 1

一如既往：Flex是我们的主人和救世主：）

制作ul{ display : flex }，然后通过li {flex-basis : 33.33% }

为每个孩子提供宽度的三分之一

＆＃13;

＆＃13;

ul.tabs {
    display : flex;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;