假设我有一个bootstrap按钮,带有一个字体很棒的图标和一些文本:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
我如何使文本显示垂直居中? 文本现在与图标的底部边缘对齐:http://jsfiddle.net/V7DLm/1/
假设我有一个bootstrap按钮,带有一个字体很棒的图标和一些文本:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
我如何使文本显示垂直居中? 文本现在与图标的底部边缘对齐:http://jsfiddle.net/V7DLm/1/
当前回答
尝试设置你的图标高度:100%
您不需要对包装器做任何操作(比如,您的按钮)。
这需要字体Awesome 5。不确定它是否适用于旧的FA版本。
.wrap svg {
height: 100%;
}
注意,图标实际上是svg图形。
Demo
其他回答
如果没有对齐,一个简单的line-height: inherit;通过CSS在特定的i.a a元素有对齐问题可以做的伎俩足够简单。
你也可以使用全局解决方案,由于CSS的特异性略高,它将覆盖FontAwesome的.fa规则,该规则指定line-height: 1而不需要属性上的!important:
i.fa {
line-height: inherit;
}
只要确保上面的全局解决方案不会在你可能使用fontaweesome图标的地方引起任何其他问题。
微调图标线高的另一个选项是使用垂直对齐属性的百分比。通常,0是底部,100%是顶部,但也可以使用负值或大于100的值来创造有趣的效果。
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}
这对我来说很有效。
i.fa {
line-height: 100%;
}
对于那些使用Bootstrap 4的人来说很简单:
<span class="align-middle"><i class="fas fa-camera"></i></span>
我99%的情况下在文本旁边使用图标,所以我做了全局更改:
.fa-2x {
vertical-align: middle;
}
根据需要将3x, 4x等添加到相同的定义中。