假设我有一个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/
当前回答
最简单的方法是设置垂直对齐css属性为middle
i.fa {
vertical-align: middle;
}
其他回答
对我来说,只要让元素显示网格,并对齐内容就可以完美地工作。简单的解决方案。
.yourfontawesome<i>Element{
display: grid;
align-content: center;
}
简单地定义图标元素的垂直对齐属性:
div .icon {
vertical-align: middle;
}
这对我来说很有效。
i.fa {
line-height: 100%;
}
微调图标线高的另一个选项是使用垂直对齐属性的百分比。通常,0是底部,100%是顶部,但也可以使用负值或大于100的值来创造有趣的效果。
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}
这个问题几年前就有人问过了。我认为技术已经发生了很大的变化,浏览器的兼容性也更好了。你可以使用垂直对齐,但我认为它的可伸缩性和可重用性较差。我建议使用flexbox方法。
下面是原始海报使用的相同示例,但使用了flexbox。它为单个元素设置样式。如果按钮大小因某种原因而改变,它将继续保持垂直和水平居中。
.button {
border: 1px solid #ccc;
height: 40px;
margin: 60px;
padding: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
例如:JsFiddle