如何将文字与图标字体垂直对齐？

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

您可以添加vertical-align:middle到span元素:

这里有更新的例子

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

Answer 2

这里已经有一些答案,但我发现flexbox是最干净,最不"hacky"的解决方案:

parent-element {
  display: flex;
  align-items: center;
}

要支持Safari <8,Firefox <21和Internet Explorer <10(使用此polyfill支持IE8 + 9),您需要供应商前缀:

parent-element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

Answer 3

vertical-align 可以采用单位价值,以便您在需要时可以使用它:

{
  display:inline-block;
  vertical-align: 5px;
}

{
  display:inline-block;
  vertical-align: -5px;
}

Answer 4

扩展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;
    }
}

Answer 5

将其添加到您的CSS:

.menu i.large.icon,
.menu i.large.basic.icon {
    vertical-align:baseline;
}

DEMO

Answer 6

设置line-height图片的垂直尺寸，然后vertical-align:middle像乔什说的那样。

所以如果图片是20px，你就会有

{
line-height:20px;
font-size:14px;
vertical-align:middle;
}