我有一个非常基本的 HTML，它混合了纯文本和图标字体。 问题是图标没有完全呈现在与文本相同的高度：
<div class="ui menu">
<a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
<a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
<a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>有什么解决办法吗？
【问题讨论】：
标签： html css fonts font-awesome
在这种情况下，由于您正在使用inline 级别的元素，您可以将vertical-align: middle 添加到span 元素以实现垂直居中：
.nav-text {
vertical-align: middle;
}
或者，您可以将父元素的display 设置为flex，并将align-items 设置为center 为vertical centering：
.menu {
display: flex;
align-items: center;
}
【讨论】：
这里已经有一些答案了，但我发现 flexbox 是最干净、最不“hacky”的解决方案：
parent-element {
display: flex;
align-items: center;
}
要支持 Safari this polyfill 支持 IE8+9），您需要供应商前缀：
parent-element {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
【讨论】：
a元素的想法？如果是，您将更改链接的display，以便将内联元素转换为块元素。我不同意这是最好的解决方案。
inline-flex 而不仅仅是flex
vertical-align 可以采用单位值，因此您可以在需要时使用它：
{
display:inline-block;
vertical-align: 5px;
}
{
display:inline-block;
vertical-align: -5px;
}
【讨论】：
【讨论】：
将line-height设置为图片的垂直大小，然后像乔希说的那样做vertical-align:middle。
所以如果图片是20px，你就会有
{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
【讨论】：
<a> 标签上？
垂直和水平居中使用这个：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
【讨论】：
扩展Marian Udrea的回答：
在我的场景中，我试图将文本与材质图标对齐。材质图标有些奇怪，无法对齐。在我将vertical-align 添加到图标元素而不是父元素之前，所有答案都不起作用。
所以，如果图标的高度是24px：
.parent {
line-height: 24px; // Same as icon height
i.material-icons { // Only if you're using material icons
display: inline-flex;
vertical-align: top;
}
}
【讨论】：
添加到跨度
vertical-align:baseline;
不适合我，但是
vertical-align:baseline;
vertical-align:-webkit-baseline-middle;
确实有效（在 Chrome 上测试）
【讨论】：
使用 CSS 网格
HTML
<div class="container">
<i class="fab fa-5x fa-file"></i>
<span>text</span>
</div>
CSS
.container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
【讨论】：
你可以使用这个属性：vertical-align:middle;
.selector-class {
float:left;
vertical-align:middle;
}
【讨论】：