Javascript 在MaterializeCSS导航栏中垂直居中材质图标？

我有一个我正在帮助建立的网站，当我将

settings

放在一个选项卡中时，它最终看起来是这样的：

在查看图标的边界时，它似乎越过了它的封闭标记，并位于该点的中心，这与相邻标记中的文本不同

镀铬：

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

在导航中放置选项卡时，似乎存在一些css冲突。你可以用一些定制的css来解决这个问题

---

虽然我不是px的最大粉丝（因为我不确定它在手机和PC以外的其他设备上会有什么反应），但它确实能工作！非常感谢。

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