假设我有一个bootstrap按钮，带有一个字体很棒的图标和一些文本:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
我如何使文本显示垂直居中? 文本现在与图标的底部边缘对齐:http://jsfiddle.net/V7DLm/1/
当前回答
微调图标线高的另一个选项是使用垂直对齐属性的百分比。通常，0是底部，100%是顶部，但也可以使用负值或大于100的值来创造有趣的效果。
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}
其他回答
这对我来说很有效。
i.fa {
line-height: 100%;
}
我将文本包装在一个，所以你可以分别针对它。现在，如果同时浮动和左浮动，则可以使用line-height来控制对象的垂直间距。将它设置为与(30px)相同的高度，将使它在中间对齐。在这里看到的。
新的标记:
<div>
<i class='icon icon-2x icon-camera'></i>
<span id="text">hello world</span>
</div>
新CSS:
div {
border: 1px solid #ccc;
height: 30px;
margin: 60px;
padding: 4px;
vertical-align: middle;
}
i{
float: left;
}
#text{
line-height: 30px;
float: left;
}
对我来说，只要让元素显示网格，并对齐内容就可以完美地工作。简单的解决方案。
.yourfontawesome<i>Element{
display: grid;
align-content: center;
}
微调图标线高的另一个选项是使用垂直对齐属性的百分比。通常，0是底部，100%是顶部，但也可以使用负值或大于100的值来创造有趣的效果。
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}
尝试设置你的图标高度:100%
您不需要对包装器做任何操作(比如，您的按钮)。
这需要字体Awesome 5。不确定它是否适用于旧的FA版本。
.wrap svg {
height: 100%;
}
注意，图标实际上是svg图形。
Demo
