MaterialiseCSS 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;
}