html - Material 设计图标，如何将它们作为文本居中？

Question

我一直在尝试使用带有 3 个链接的 MaterializeCSS 做一些导航栏，每个链接的宽度为导航栏的 33%，我想将文本居中放置在链接中(甚至是图标)

如果我不放置左类或右类，文本和图标就不会保持在同一行中......但是如果我将左类放置到图标上，那么它会向左浮动，因此考虑到navbar width:100%，图标和文字之间的间距太大。

这是HTML

<div id="secondary-navbar"><nav>
  <div class="nav-wrapper">
    <ul>
      <li>
        <a href="#!">
          <i class="material-icons left">event</i>Calendario
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">location_on</i>Mapa
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">apps</i>Galería
        </a>
      </li>
    </ul>
  </div>
</nav></div>

和 CSS

#secondary-navbar nav
{
    background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a
{
    font-size:1.2em;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    font-size:1.2em;
    margin-right:0.2em;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    color:#06207d;
}

#secondary-navbar nav .nav-wrapper ul li
{
    width:33%;  
}
#secondary-navbar nav .nav-wrapper ul li:nth-child(3)
{

    width:34%;
}

这是一个 jsfiddle，我尝试对图标使用内联 block ，但随后导航栏的高度超过 56 像素... https://jsfiddle.net/4aednm5d/

你知道如何解决这个问题吗？

Answer 1

我一般用这个:

.icon-align {
       vertical-align: text-bottom;
    }
<i class="material-icons md-18 icon align">check_circle</i>Auto Accepted</div>`