css - 使字形图标在一行中居中

Question

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

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

Answer 1

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

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>