假设我有一个bootstrap按钮,带有一个字体很棒的图标和一些文本:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

我如何使文本显示垂直居中? 文本现在与图标的底部边缘对齐:http://jsfiddle.net/V7DLm/1/


当前回答

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

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

其他回答

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

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}

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

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

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

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

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

这对我来说很有效。

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