垂直对齐材质图标 [英] Align material icon vertically

问题描述

我正在尝试在导航菜单中垂直对齐我的下拉箭头".

I am trying to vertically align my "dropdown arrow" in a naviation menu.

我已经尝试了诸如vertical-align:middle，display:inline-block之类的各种操作，但那根本没有帮助. http://img02.imgland.net/jfCmDoW.png

I have tried varioust hings like vertical-align: middle, display: inline-block and stuff like that but that didn't help at all. 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/

I have created a JSFiddle which demonstrates the problem: https://jsfiddle.net/dbwaoLrh/

我每次在使用Materialize-framework使用自定义"字体大小时都会遇到此问题，对此我所做的解释深表赞赏.

Explanations of what I am doing wrong there are highly appreciated as I face this issue every time I am using "custom" font sizes using the materialize-framework.

推荐答案

您可能已经尝试过各种样式来安排您的图标，但是您需要定位>图标，即我标记，如下所示和样式，

You might have tried various styling to arrange your icons, but you need to target your icons i.e. i tag as below and style,

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

选中这两个 jsFiddle ，我为了理解目的将 background 添加到其中.

Check this two jsFiddle, I have added background to one just for understanding purpose.

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

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

这篇关于垂直对齐材质图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！