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

あなたはNAVでタブを入れたときに、いくつかのCSSの競合があるようです。カスタムCSSでこれを修正できます。

Codepen

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