使字形图标在一行中居中

Question

我在 link 中有一个字形图标，旁边有一些文本。 Here's jsFiddle.

文本的底部与图标的底部对齐，但我对此并不满意。我想显示图标，然后将文本对齐到中间，而不是底部（注意图标的高度是 14px，旁边的文本是 16px）。我试过在包含图标的 span 的顶部应用边距或填充，但这会将它们都向下移动并且它们之间的对齐方式保持不变。我需要将图标向下推几个像素或将文本向上推但不移动另一个。听起来很简单，但我找不到解决方案。想法？

Answer 1

在 <span> 和 <a> 标签中添加带有 css 属性 vertical-align:middle 的新 class。尝试以下解决方案，希望对您有所帮助。

HTML

.icn {
  vertical-align: middle;
}
.txt {
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<li>
  <a href="#">
    <span class="glyphicon glyphicon-search icn"></span>
    <span class="txt">&nbsp;text goes here</span>
  </a>
</li>

使字形图标在一行中居中

Centering a glyph icon within a line

css

glyphicons

glyph