将 div 内的 Font Awesome 图标与 H1 垂直对齐
Vertically aligning a Font Awesome icon inside a div along with an H1
这是一个 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
,但对齐方式仍然没有改变。任何解决方法?
你可以这样做:
h1, span{
display: inline-block;
vertical-align: middle;
}
您可以尝试使用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;
}
希望对您有所帮助!
试试这个:
.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; }
(没有看到工作演示,很难说哪个选项最好)
这是一个 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
,但对齐方式仍然没有改变。任何解决方法?
你可以这样做:
h1, span{
display: inline-block;
vertical-align: middle;
}
您可以尝试使用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;
}
希望对您有所帮助!
试试这个:
.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; }
(没有看到工作演示,很难说哪个选项最好)