如何将文本垂直中心与一个大字体awesome图标?

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

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

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

当前回答

这对我来说很有效。

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

其他回答

这对我来说很有效。

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

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

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

我99%的情况下在文本旁边使用图标，所以我做了全局更改:

.fa-2x {
  vertical-align: middle;
}

根据需要将3x, 4x等添加到相同的定义中。

当使用flexbox时，字体和文字旁边的图标垂直对齐是非常困难的。我尝试了页边距和填充，但这移动了所有项目。我尝试了不同的弯曲对齐，如中心，开始，基线等，没有任何效果。调整图标的最简单和最干净的方法是将其包含的div设置为position: relative;上图:XX;这件事做得很完美。

最简单的方法是设置垂直对齐css属性为middle

i.fa {
    vertical-align: middle;
}

推荐文章