垂直对齐材质图标

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/

我正在做错的解释当我每次使用materialize-framework使用“自定义”字体大小时，我都会面对这个问题。

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/

Answer 2

使用line-height进行简单的垂直居中：

此属性控制文本行中行的height，并在内联元素的行框上方和下方添加等量的空间。如果已知容器的height，则设置相同值的line-height将使子元素垂直居中。

.container {
    width: 200px;
    height: 200px;
    line-height: 200px;
}

使用position和transform进行灵活的垂直居中：

.container {
    position: relative;
    min-height: 100vh;
}
.vertical-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

或者我们可以使用margin代替定位！

使用flexbox进行垂直居中：

上述方法适用于使用传统箱型和定位技术对中心元素。它可以在IE9 +中运行，但是如果你只需要支持现代浏览器或IE10 +，那么使用flexbox可以用更少的代码实现相同的结果。

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

Answer 3

你应该试试这个： -

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

Answer 4

试试这个

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

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

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

你做错了什么

图标有css规则： font-size：24px ，它大于父锚元素，行高为1，因此生成的行高为24px;这就是它无法正常工作的原因。如果你想要你可以使用你自己的代码改变行高等于父锚元素并使用 vertical-align：middle 作为图标

请参阅Js Fiddle

Answer 5

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

Answer 6

我使用了Awesome字体，并且为了获得与Material Font完全相同的Vertical Align，我设置了这个CSS，它完美地对齐了

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

经过Firefox，Chrome，InternetExplorer和Edge的测试。

Answer 7

我知道这是一个老问题，但我发现这个解决方案适用于每个行高：

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