css - 垂直对齐 Material 图标

Question

我试图在导航菜单中垂直对齐我的“下拉箭头”。

我已经尝试过各种方法，例如 vertical-align: middle、display: inline-block 和类似的东西，但根本没有用。 http://img02.imgland.net/jfCmDoW.png

HTML 看起来像这样:

  <li>
    <a href="#!" data-activates="dropdown1">English
      <i class="material-icons">arrow_drop_down</i>
    </a>
  </li>

我创建了一个演示问题的 JSFiddle:https://jsfiddle.net/dbwaoLrh/

非常感谢对我做错了什么的解释，因为每次我使用物化框架使用“自定义”字体大小时都会遇到这个问题。

Answer 1

您可能已经尝试过各种样式来安排您的图标，但是您需要针对您的图标，即i标签，如下所示和样式，

.footer-links > li > a > i{
  vertical-align:middle;
} 

检查这个两个jsFiddle，我已经为一个添加了background只是为了理解目的。

https://jsfiddle.net/dbwaoLrh/2/

https://jsfiddle.net/dbwaoLrh/4/