垂直对齐材质图标

Question

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

我已经尝试过各种方法，例如垂直对齐：中间，显示：内联块和类似的东西，但这根本没有帮助。 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/

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

原文由 kentor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可能已经尝试过各种 styling 来安排您的 icons ，但是您需要针对您的 icons i.e. i tag 和样式，

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

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

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

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

原文由 frnt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我知道这是一个老问题，但我发现这个解决方案在每个行高上都能更好地工作：

         .material-icons {
            vertical-align: middle;
            line-height: 1px;
        }

原文由 Henry 发布，翻译遵循 CC BY-SA 4.0 许可协议