垂直对齐材质图标答案

【问题标题】：Align material icon vertically垂直对齐材质图标
【发布时间】：2017-04-12 04:48:28
【问题描述】：

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

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

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

【问题讨论】：

标签： css

【解决方案1】：

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

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

检查此two jsFiddle，我已将background 添加到其中，只是为了便于理解。

【讨论】：

【解决方案2】：

试试这个

.material-icons {
    vertical-align: 1px; /*Change this to adjust the icon*/
}

您可以使用的第二个选项是：

.material-icons {
    position: relative;
    top: 1px; /*Change this to adjust the icon*/
}

你做错了什么

icon有css规则：font-size:24px，大于父锚元素，行高为1，因此行高为24px；这就是为什么它不起作用。如果您愿意，您可以使用自己的代码，只需将行高更改为父锚元素并使用 vertical-align:middle 作为图标

【讨论】：

【解决方案3】：

.material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

【讨论】：

【解决方案4】：

你应该为.material-icons添加vertical-align: middle;规则：-

.material-icons {
  vertical-align: middle;
}

【讨论】：

【解决方案5】：

我知道这是一个老问题，但我发现这个解决方案在每个 line-height 上效果更好：

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

【讨论】：

【解决方案6】：

我使用的是 Awesome 字体，为了获得与 Material Font 完全相同的垂直对齐，我设置了这个 CSS，它完美对齐

.material-icons {
vertical-align: middle;
padding-bottom: 3px }

在 Firefox、Chrome、InternetExplorer 和 Edge 中测试。

【讨论】：