html - 如何垂直对齐图标字体的文本？

Question

我有一个非常基本的 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>

有什么修复建议吗？

Answer 1

在这种情况下，由于您正在使用 inline 级元素，您可以将 vertical-align: middle 添加到 span 元素垂直居中:

.nav-text {
  vertical-align: middle;
}

---

或者，您可以将父元素的 display 设置为 flex 并将 align-items 设置为 center 对于 vertical centering :

.menu {
  display: flex;
  align-items: center;
}