假设我有一个bootstrap按钮，带有一个字体很棒的图标和一些文本:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
我如何使文本显示垂直居中? 文本现在与图标的底部边缘对齐:http://jsfiddle.net/V7DLm/1/
当前回答
这个问题几年前就有人问过了。我认为技术已经发生了很大的变化，浏览器的兼容性也更好了。你可以使用垂直对齐，但我认为它的可伸缩性和可重用性较差。我建议使用flexbox方法。
下面是原始海报使用的相同示例，但使用了flexbox。它为单个元素设置样式。如果按钮大小因某种原因而改变，它将继续保持垂直和水平居中。
.button {
border: 1px solid #ccc;
height: 40px;
margin: 60px;
padding: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
例如:JsFiddle
其他回答
在考虑了所有建议的选项后，最干净的解决方案似乎是设置行高和垂直对齐:
参见Jsfiddle Demo
CSS:
div {
border: 1px solid #ccc;
display: inline-block;
height: 50px;
margin: 60px;
padding: 10px;
}
#text, #ico {
line-height: 50px;
}
#ico {
vertical-align: middle;
}
我必须自己做这件事，你需要反过来做。
不要玩弄文字的垂直对齐 玩垂直对齐的字体-真棒的图标
<div>
<span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
<span class="my-text">hello world</span>
</div>
当然，您不能使用内联样式并将其与您自己的css类相匹配。但这是以复制粘贴的方式工作的。
在这里看到的: 按钮中的文本和图标垂直对齐
然而，如果由我来决定，我不会使用icon-2x。并简单地自己指定字体大小，如下所示
<div class='my-fancy-container'>
<span class='my-icon icon-file-text'></span>
<span class='my-text'>Hello World</span>
</div>
.my-icon {
vertical-align: middle;
font-size: 40px;
}
.my-text {
font-family: "Courier-new";
}
.my-fancy-container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
}
有关工作示例，请参阅JsFiddle
如果没有对齐，一个简单的line-height: inherit;通过CSS在特定的i.a a元素有对齐问题可以做的伎俩足够简单。
你也可以使用全局解决方案，由于CSS的特异性略高，它将覆盖FontAwesome的.fa规则，该规则指定line-height: 1而不需要属性上的!important:
i.fa {
line-height: inherit;
}
只要确保上面的全局解决方案不会在你可能使用fontaweesome图标的地方引起任何其他问题。
对于那些使用Bootstrap 4的人来说很简单:
<span class="align-middle"><i class="fas fa-camera"></i></span>
我99%的情况下在文本旁边使用图标，所以我做了全局更改:
.fa-2x {
vertical-align: middle;
}
根据需要将3x, 4x等添加到相同的定义中。
