Material_icon in MaterialiseCSS Navbar vertikal zentrieren?

Question

Ich habe eine Website, die ich bin mit Hilfe von Materialize bauen, und wenn ich <i class="material-icons valign-center">settings</i> in einem Register gesetzt, es endet wie folgt aussehen:

Und auf für das Symbol an den Grenzen suchen Es scheint, dass es über seine umschließenden Tags hinausgeht und im Gegensatz zum Text in benachbarten Tags an dieser Stelle zentriert wird.

In Chrome:

In Firefox (Folgendes wird auch in Firefox sein):

Was die anderen Text wie folgt aussieht:

Text-Schnipsel für die navbar:

<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

Es scheint einige CSS-Konflikte zu sein, wenn Sie Registerkarten in der nav setzen. Sie können dies mit einigen benutzerdefinierten CSS beheben.

Codepen

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