垂直对齐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

试试这个：

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

或

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

或

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

（没有看到工作演示，很难分辨哪个选项，如果有的话）

Answer 3

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

你做的是你采取＆＃34;包装的height＆＃34; <div>和<h1>的{​​{1}}，您将行高设置为等于该高度。

示例HTML

<i>

示例CSS

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

希望这有帮助！