垂直对齐材质图标

Question

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

我尝试过像vertical-align这样的变量:中间,显示:内联块和类似的东西,但这根本没有帮助. 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

您应该vertical-align: middle;为.material-icons以下内容添加规则：-

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

Answer 3

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

此属性控制height一行文本中的一行，并在行内元素的行框上方和下方添加相等的空间。如果height容器的已知，则将a设置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 4

我知道这是一个老问题，但我发现这个解决方案对于每个行高都效果更好：

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

Answer 5

尝试这个

.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；这就是为什么它不起作用。如果您可以使用自己的代码，只需将line-height更改为等于父锚元素，然后将vertical-align：middle用作图标

见小提琴

Answer 6

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