可以说我有一个带有字体真棒图标和一些文字的引导按钮：
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
如何使文本垂直居中显示？文本现在与图标的下边缘对齐：http://jsfiddle.net/V7DLm/1/
编辑：我有一个可能的解决方案：http://jsfiddle.net/CLdeG/1/但感觉有点hacky - 介绍额外的p标签，使用左拉和显示：表。也许有人可以建议一个更简单的方法
我必须自己做，你需要反过来做。
<div>
<span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
<span class="my-text">hello world</span>
</div>
当然，您无法使用内联样式并使用自己的css类进行定位。但这适用于复制粘贴方式。
见这里：Vertical alignment of text and icon in button
但是，如果由我决定，我不会使用icon-2x。并且只需自己指定font-size，如下所示
<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来控制垂直间距。将其设置为与（30px）相同的高度将使其对齐。见here。
新标记：
<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;
}
使用flexbox时，文本旁边的字体真棒图标的垂直对齐可能非常困难。我尝试了边距和填充，但这移动了所有项目。我尝试了不同的柔性对齐，如中心，开始，基线等，但无济于事。仅调整图标的最简单，最干净的方法是将其设置为包含div到position: relative; top: XX;这完美地完成了这项工作。
对于那些使用Bootstrap 4的人很简单：
<span class="align-middle"><i class="fas fa-camera"></i></span>
好吧，这个问题是在几年前被问到的。我认为技术已经发生了很大变化，浏览器兼容性要好得多。您可以使用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
我99％的时间都在文本旁边使用图标，所以我在全局范围内进行了更改：
.fa-2x {
vertical-align: middle;
}
根据需要将3x，4x等添加到相同的定义中。
在考虑了所有建议的选项之后，最干净的解决方案似乎是设置行高和垂直对齐所有内容：
CSS：
div {
border: 1px solid #ccc;
display: inline-block;
height: 50px;
margin: 60px;
padding: 10px;
}
#text, #ico {
line-height: 50px;
}
#ico {
vertical-align: middle;
}
如果事情没有排成一行，那么通过CSS对一些具有对齐问题的特定i.fa元素进行简单的line-height: inherit;就可以做到这一点。
您也可以使用全局解决方案，由于稍高的CSS特异性将覆盖FontAwesome的.fa规则，该规则指定line-height: 1而不需要在属性上使用!important：
i.fa {
line-height: inherit;
}
只需确保上述全局解决方案不会在您可能也使用FontAwesome图标的地方引起任何其他问题。
一个flexbox选项 - 字体真棒4.7及以下
FA 4.x托管网址 - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
div {
display: inline-flex; /* make element size relative to content */
align-items: center; /* vertical alignment of items */
line-height: 40px; /* vertically size by height, line-height or padding */
padding: 0px 10px; /* horizontal with padding-l/r */
border: 1px solid #ccc;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class='fa fa-2x fa-camera'></i>
hello world
</div>小提琴
http://jsfiddle.net/Hastig/V7DLm/180/
使用flex和字体真棒5
FA 5.x托管网址 - https://use.fontawesome.com/releases/v5.0.8/js/all.js
div {
display: inline-flex; /* make element size relative to content */
align-items: center; /* vertical alignment of items */
padding: 3px 10px; /* horizontal vertical position with padding */
border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
<i class='fas fa-camera'></i>
hello world
</div>
<div class="icon-clock">
<i class='fas fa-clock'></i>
hello world
</div>小提琴
最简单的方法是将vertical-align css属性设置为middle
i.fa {
vertical-align: middle;
}
这对我很有用。
i.fa {
line-height: 100%;
}
尝试将您的图标设置为height: 100%
你不需要对包装器（比如你的按钮）做任何事情。
这需要Font Awesome 5.不确定它是否适用于较旧的FA版本。
.wrap svg {
height: 100%;
}
请注意，该图标实际上是svg图形。
微调图标线高的另一个选择是使用vertical-align属性的百分比。通常，0％是底部，100％是顶部，但是可以使用负值或超过100来创建有趣的效果。
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}