javascript - 如何对齐选项卡 - materialize.js？

Question

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

<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 中遇到了很大的麻烦，这个标签叫做“SHOULD BE CENTERED”。我不知道如何将此 TAB 精确移动到屏幕中间，因为添加了属性:

vertical-align: center

或

text-align: center

似乎根本不起作用。

编辑: 所以我希望任何人都能够帮助我。提前一百万谢谢，简

Answer 1

一如既往:Flex 是我们的主宰和救世主:)

让你的 ul{ display : flex } 然后给每个 child 三分之一的宽度 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>