如何使用大字体真棒图标使文本垂直居中？

好吧，这个问题是几年前问的。我认为技术已经发生了很大变化，并且浏览器的兼容性要好得多。您可以使用vertical-align，但我认为有些可扩展性和可重用性较低。我建议使用flexbox方法。

这是原始海报使用的相同示例，但带有flexbox。它设置单个元素的样式。如果按钮大小由于任何原因而改变，它将继续在垂直和水平方向居中。

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

示例： JsFiddle

使用flexbox时，很难在文本旁边垂直对齐字体很棒的图标。我尝试了边距和填充，但是移动了所有项目。我尝试了不同的折线对齐方式，例如居中，开始，基线等，但无济于事。调整图标的最简便方法是将其包含div设置为position: relative; top: XX;。

对于那些使用Bootstrap 4的人来说很简单：

<span class="align-middle"><i class="fas fa-camera"></i></span>

调整图标行高的另一种方法是使用vertical-align属性的百分比。通常，0％是底部，而100％是顶部，但是一个人可以使用负值或大于100来创建有趣的效果。

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

这对我来说很好。

i.fa {
  line-height: 100%;
}

尝试将图标设置为 height: 100%

您无需对包装程序进行任何操作（例如，按钮）。

这需要Font Awesome5。不确定它是否适用于较早的FA版本。

.wrap svg {
    height: 100%;
}

请注意，图标实际上是svg图形。

演示版

我99％的时间都在文字旁边使用图标，因此我进行了全局更改：

.fa-2x {
  vertical-align: middle;
}

根据需要将3x，4x等添加到相同的定义。

最简单的方法是将vertical-align css属性设置为middle

i.fa {
    vertical-align: middle;
}

如果事情没有line-height: inherit;得到解决，那么在存在对齐问题的特定i.fa元素上通过CSS进行简单的操作就可以解决问题。

您还可以可行地使用全局解决方案，由于稍微更高的CSS特异性，它将覆盖FontAwesome的.fa规则，该规则指定了该属性line-height: 1而无需!important：

i.fa {
  line-height: inherit;
}

只要确保上述全局解决方案在可能还会使用FontAwesome图标的地方不会引起任何其他问题即可。

在考虑了所有建议的选项之后，最干净的解决方案似乎是设置所有行的高度和垂直对齐：

参见Jsfiddle演示

CSS：

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}