我有这段代码:
<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并使用font-awesome V形图标。 这是image
答案 0 :(得分:1)
这是因为左边div内的按钮有一定的高度,也会影响右边的元素。
只需添加行高等于绿色按钮的高度:
.clickable i {
line-height: 34px;
}
我还在图标类中修正了你的拼写错误。还有额外的&#39;&#39;这会导致推特图标无法呈现。
<i class="fa fa-twitter"></i>
我更新了codepen。
我添加了一个包装器和背景颜色,因此您可以轻松地看到它已正确对齐。