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

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

有什么建议可以解决吗？

在这种情况下，由于您正在使用inline-level元素，因此可以添加vertical-align: middle到span元素中以进行垂直居中：

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

另外，您可以将display父元素的flex设置align-items为center，并设置为垂直居中：

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

这里已经有了一些答案，但是我发现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;
}

vertical-align 可以取一个单位值，因此您可以在需要时使用该值：

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

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

将此添加到您的CSS：

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

演示

垂直和水平居中使用此：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

设置line-height为图片的垂直大小，然后按vertical-align:middleJosh所说的做。

因此，如果画面20px，你会

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

添加到跨度

vertical-align:baseline;

不是为我工作，而是

vertical-align:baseline;
vertical-align:-webkit-baseline-middle;

确实有效（在Chrome上测试）

您可以使用此属性： vertical-align:middle;

.selector-class { 
    float:left;
    vertical-align:middle; 
} 

使用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;
}

工作实例

为了扩展玛丽安·乌德里亚（Marian Udrea）的答案：在我的场景中，我试图将文本与实体图标对齐。材质图标有些奇怪，无法对齐。在我将vertical-align图标添加到icon元素（而不是父元素）之前，没有任何答案有效。

因此，如果图标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;
    }
}