在MaterializeCSS Navbar中垂直居中material_icon？

Question

我有一個網站，我用的Materialize的幫助下建立的，當我在一個標籤把<i class="material-icons valign-center">settings</i>，它結束了看起來像這樣：

而且在觀看界限的圖標，它似乎超過了它的封裝標籤，並且正在該位置居中，而不像相鄰標籤中的文本。

在Chrome中：

在Firefox（以下也將在Firefox）：

其他文本的樣子：

的導航欄文本片段：

<nav class="nav-extended teal"> 
    <div class="nav-wrapper"> 
     <ul id="nav-mobile" class="left"> 
      <li><a href="sass.html"><i class="material-icons">arrow_back</i></a></li> 
     </ul> 
     <a href="#" class="brand-logo"><i class="material-icons left" style="font-size: 1.5em;">access_time</i> 
      Classy 
      Clock</a> 
     &nbsp; 
     <ul class="tabs tabs-transparent"> 
      <li class="tab"><a class="active" href="#settings"><i class="material-icons valign-center">settings</i></a> 
      </li> 
      <li class="tab"><a href="#monday">Monday</a></li> 
      <li class="tab"><a href="#tuesday">Tuesday</a></li> 
      <li class="tab"><a href="#wednesday">Wednesday</a></li> 
      <li class="tab"><a href="#thursday">Thursday</a></li> 
      <li class="tab"><a href="#friday">Friday</a></li> 
      <li class="tab"><a href="#saturday">Saturday</a></li> 
      <li class="tab"><a href="#sunday">Sunday</a></li> 
     </ul> 
    </div> 
</nav> 

Answer 1

似乎有一些CSS衝突，當你把標籤的資產淨值。你可以用一些自定義的CSS來解決這個問題。

Codepen

nav .tab i.material-icons { 
    height: 48px; 
    line-height: 48px; 
}