Question

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

问题是图标are not exactly rendered at the same height than the text：

enter image description here

有任何修复建议吗？

Answer 1

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

UPDATED EXAMPLE HERE

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

Answer 2

这里已经有一些答案，但我发现flexbox是最干净，最不“hacky”的解决方案：

parent-element {
  display: flex;
  align-items: center;
}

支持Safari＆lt; 8，Firefox＆lt; 21和Internet Explorer＆lt; 10（使用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;
}

Answer 3

vertical-align可以获取单位价值，以便您在需要时可以使用该值：

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

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

Answer 4

将此添加到您的CSS：

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

DEMO

Answer 5

垂直和水平居中使用：

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

Answer 6

将line-height设置为图片的垂直尺寸，然后像Josh所说的那样vertical-align:middle。

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

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

Answer 7

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

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

Answer 8

添加范围

if isinstance(foo, basestring):
    foo = (foo,) # turn it into an iterable (tuple)
    # or, doStuff(foo) followed by a return or break
try:
    for x in foo:
        doStuff(str(x)) # do something with each element
except TypeError: # TypeError: 'some' object is not iterable
    doStuff(str(foo))

没有为我工作但是

vertical-align:baseline;

确实有效（在Chrome上测试）

Answer 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

Answer 10

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

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

10 个答案: