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

【问题标题】：Vertical center a span with font-awesome 5 SVG icon in Bootstrap Panel Heading在 Bootstrap 面板标题中垂直居中一个带有 font-awesome 5 SVG 图标的跨度
【发布时间】：2018-08-05 07:22:18
【问题描述】：

我有这个代码：

   <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 chevron 图标跨越。这是image

【问题讨论】：

你的意思是你想让 col-md-1 和其他元素在同一行吗？
正好在中间
我不明白...codepen.io/alezuc/pen/WMavVQ这是你的代码，在中间...嗯...
Vedo che sei di Milano, quindi scrivo in italiano, in pratica non riesco ad allinearlo verticalmente。 Ho messo solo la parte del panel heading, ti passo il resto se vuoi
好的，但是让我们继续用英语交谈..如果你有绿色图标-文本-图标，垂直对齐意味着所有内容都在一行，对吗？随意分叉 Pen 并添加更多上下文

标签： css twitter-bootstrap svg panel font-awesome-5

【解决方案1】：

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

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

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

我还修正了您在图标类中的拼写错误。有一个额外的“b”会导致 twitter 图标不呈现。

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

我已更新codepen。

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

【讨论】：

好的，我明白了，但是还有一个问题，如果你使用 font-awesone 脚本，它就不起作用：
@Andrea 我已经更新了 codepen，代码不再工作了，因为 JS 将 i 更改为 svg。很容易修复！
@Andrea 不客气！别忘了点赞！谢谢;)
我刚刚开始，当我达到前 15 名时，我会立即为您的帖子投票。快乐的一天
我在这种模式下解决了：