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

Posted

技术标签:

【中文标题】如何将文本与图标字体垂直对齐?【英文标题】:How to vertically align text with icon font? 【发布时间】:2014-04-28 00:39:25 【问题描述】:

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

有什么解决办法吗?

【问题讨论】:

网址内容无效jsfiddle.net/Fractaliste/caFk4/11 【参考方案1】:

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

.nav-text 
  vertical-align: middle;


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

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

【讨论】:

从问题来看,他似乎想将图标与文本对齐,而不是文本与图标对齐。 @Arbel 我不确定 - 标题说:“将文本与图标对齐” .. 不过本质上是一样的。 @Arbel 好吧,如果我需要基线或中心对齐,我忘了写,但是这两个提案都提供了比我最初的观点更清晰的结果,所以我认为你的两个答案很好。【参考方案2】:

这里已经有一些答案了,但我发现 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,以便将内联元素转换为块元素。我不同意这是最好的解决方案。 @Gorzas 在这种情况下,我相信您可以使用inline-flex 而不仅仅是flex【参考方案3】:

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


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



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

【讨论】:

我尝试了上述所有建议,但只有您的建议效果很好。谢谢【参考方案4】:

将此添加到您的 CSS 中:

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

DEMO

【讨论】:

【参考方案5】:

line-height设置为图片的垂直大小,然后像乔希说的那样做vertical-align:middle

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


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

【讨论】:

据我了解,我应该将您的 CSS 代码应用到 &lt;a&gt; 标签上? 是一个内联元素,你可能想使用像 这样的块元素,因为 对调整 css 大小的反应很奇怪。这里的关键是让文本元素和你的图片大小一样,否则中心会偏移 sry 误读,是的,你也可以在 标签上这样做,同样的事情,行高 = 元素高度,这将使所有内容完美对齐【参考方案6】:

垂直和水平居中使用这个:

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

【讨论】:

【参考方案7】:

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

【讨论】:

【参考方案8】:

添加到跨度

vertical-align:baseline;

不适合我,但是

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

确实有效(在 Chrome 上测试)

【讨论】:

【参考方案9】:

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

Working example

【讨论】:

【参考方案10】:

你可以使用这个属性:vertical-align:middle;

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

【讨论】:

以上是关于如何将文本与图标字体垂直对齐?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用大字体真棒图标垂直居中文本?

垂直对齐 td 中具有可变高度的字体真棒图标

按钮中文本和图标的垂直对齐

如何将 Qlistwidgetitem 文本与图标垂直对齐?

如何在 Bootstrap 4 中将 Font-Awesome 图标与一行文本垂直对齐?

md 按钮内的字体真棒图标对齐