将 div 内的 Font Awesome 图标与 H1 垂直对齐

Question

这是一个 HTML 片段：

<div class="source">
   <h1 class="source-text">dar</h1>
   <span class="sound">
      <i class="fa fa-volume-up pronounce"></i>
   </span>
</div>

它呈现为：

如您所见，图标与 H1 标签底部对齐。相反，我需要它居中对齐。我用 CSS:

尝试了以下不同的想法

向跨度添加负填充：

.sound {
    padding-left: 1.5em;
    padding-top: -0.5em;
}
.pronounce {
    font-size: 2em !important;
}

向图标添加负填充：

.sound {
    padding-left: 1.5em;
}
.pronounce {
    font-size: 2em !important;
    padding-top: -0.5em;
}

向跨度添加负边距：

.sound {
    padding-left: 1.5em;
    margin-top: -0.5em;
}
.pronounce {
    font-size: 2em !important;
}

向图标添加负边距：

.sound {
    padding-left: 1.5em;
}
.pronounce {
    font-size: 2em !important;
    margin-top: -0.5em;
}

我什至在跨度上尝试了 vertical-align: middle，但对齐方式仍然没有改变。任何解决方法？

Answer 1

你可以这样做：

h1, span{
    display: inline-block;
    vertical-align: middle;
}

Answer 2

您可以尝试使用css line-height 属性。 Link to explanation

你所做的是取 height 的 "wrapper" <div> 的 <h1> 和 <i> 并将行高设置为等于那个高度。

样本HTML

<div class="wrapper">
    <h1>Some text</h1><i></i>
</div>

样本CSS

.wrapper {
    height:200px;
    line-height:200px;
}

希望对您有所帮助！

Answer 3

试试这个：

.source > .sound {
    display: flex;
    align-items: center;
}

或

.source  { display: flex; }
.sound   { align-self: center; }

或

.source     { display: flex; }
.sound      { display: flex; align-self: center; }
.pronounce  { align-self: center; }

（没有看到工作演示，很难说哪个选项最好）

Vertically aligning a Font Awesome icon inside a div along with an H1