html-如何使文本与图标字体垂直对齐?

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

问题是图标的渲染高度与文本的高度不同:

enter image description here

有什么建议可以解决吗?

Fractaliste asked 2020-01-13T20:43:44Z
8个解决方案
50 votes

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

此处更新示例

.nav-text {
    vertical-align:middle;
}
Josh Crozier answered 2020-01-13T20:44:07Z
37 votes

这里已经有一些答案,但是我发现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;
}
sam answered 2020-01-13T20:44:31Z
20 votes

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

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

{
  display:inline-block;
  vertical-align: -5px;
}
getsetbro answered 2020-01-13T20:44:51Z
5 votes

将此添加到您的CSS:

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

演示

Arbel answered 2020-01-13T20:45:15Z
3 votes

20px设置为图片的垂直尺寸,然后像Josh所说的那样执行vertical-align:middle

因此,如果图片是20px,您将拥有

{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
Marian Udrea answered 2020-01-13T20:45:39Z
3 votes

垂直和水平居中使用此:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
Alberto Lozano answered 2020-01-13T20:45:59Z
0 votes

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

.selector-class { 
    float:left;
    vertical-align:middle; 
} 
kishan Radadiya answered 2020-01-13T20:46:19Z
0 votes

添加到跨度

vertical-align:baseline;

不是为我工作,而是

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

确实有效(在Chrome上测试)

Tomer Almog answered 2020-01-13T20:46:47Z
translate from https://stackoverflow.com:/questions/22545325/how-to-vertically-align-text-with-icon-font