如何将文本与图标字体垂直对齐? [英] How to vertically align text with icon font?

问题描述

我有一个非常基本的 HTML，它混合了纯文本和图标字体.问题是图标与文本的高度不完全相同:

<a href="t" class="item"><i class="大主页基本图标"></i><span class="nav-text">Accueil</span></a><a href="" class="item"><i class="大相机复古图标"></i><span class="nav-text">创作</span></a><a class="item"><span class="nav-text">Qui-suis je </span><i class="大帮助基本图标"></i><;/a>

有什么修复建议吗?

解决方案

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

.nav-text {垂直对齐:中间；}

---

或者，您可以将父元素的 display 设置为 flex 并将 align-items 设置为 center> 用于垂直居中:

.menu {显示:弹性；对齐项目:居中；}

I have a very basic HTML which mix plain text and icon fonts. The problem is that icons are not exactly rendered at the same height than the text:

<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>

Any suggestion to fix it?

解决方案

In this scenario, since you are working with inline-level elements, you could add vertical-align: middle to the span elements for vertical centering:

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

---

Alternatively, you could set the display of the parent element to flex and set align-items to center for vertical centering:

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

这篇关于如何将文本与图标字体垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！