我将文本包装在一个，所以你可以分别针对它。现在，如果同时浮动和左浮动，则可以使用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;
}

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

参见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;
}

这个问题几年前就有人问过了。我认为技术已经发生了很大的变化，浏览器的兼容性也更好了。你可以使用垂直对齐，但我认为它的可伸缩性和可重用性较差。我建议使用flexbox方法。

下面是原始海报使用的相同示例，但使用了flexbox。它为单个元素设置样式。如果按钮大小因某种原因而改变，它将继续保持垂直和水平居中。

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

例如:JsFiddle

简单地定义图标元素的垂直对齐属性:

div .icon {
   vertical-align: middle;
}

对我来说，只要让元素显示网格，并对齐内容就可以完美地工作。简单的解决方案。

.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
}