我有这个代码:
<div class="panel-heading clearfix">
<div class="col-md-11 left">
<button style="display: inline-block;" type="button" class="btn btn-success btn-circle"> <i class="fab fa-twitter"></i></button>
<h3 style="display: inline-block;" class="panel-title uppercased green"> Twitter</h3>
</div>
<div class="col-md-1">
<span class="clickable right"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</div>
</div>
我在将 col-md-1 垂直居中并使用字体超棒的人字形图标时遇到问题。 这是 image
最佳答案
这是因为左侧 div 中的按钮具有一定的高度,该高度也会影响右侧的元素。
只需添加一个等于绿色按钮高度的行高:
.clickable i {
line-height: 34px;
}
我还修复了您在图标类中的拼写错误。有一个额外的“b”导致不呈现 Twitter 图标。
<i class="fa fa-twitter"></i>
我已经更新了 codepen .
我添加了 wrapper 和背景色,因此您现在可以轻松地看到它已正确对齐。
关于css - Bootstrap 面板标题中的垂直居中带有超赞字体 5 SVG 图标的跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48978300/