在 Bootstrap 面板标题中垂直居中带有 font-awesome 5 SVG 图标的跨度

Question

我有这个代码：

   <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">&nbsp; 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

Answer 1

这是因为左边的按钮 div 有一定的高度，它也会影响右边的元素。

只需添加一个 line-height 等于绿色按钮的高度：

.clickable i {
  line-height: 34px;
}

我还修复了您在图标中的拼写错误 class。有一个额外的 'b' 导致 Twitter 图标 non-rendering。

<i class="fa fa-twitter"></i>

我已经更新了 codepen。

我添加了包装纸和背景颜色，因此您现在可以很容易地看到它已正确对齐。

在 Bootstrap 面板标题中垂直居中带有 font-awesome 5 SVG 图标的跨度

Vertical center a span with font-awesome 5 SVG icon in Bootstrap Panel Heading

css

svg

panel

twitter-bootstrap

font-awesome-5