如何将文本与图标字体垂直对齐?
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 代码应用到<a>
标签上?
是一个内联元素,你可能想使用像 这样的块元素,因为 对调整 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;
【讨论】:
以上是关于如何将文本与图标字体垂直对齐?的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Qlistwidgetitem 文本与图标垂直对齐?