将一个字形图标居中放置在一行中

Question

我在链接中有一个带有一些文字的字形图标。 Here's jsFiddle

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

Answer 1

将具有css属性vertical-align:middle的新类添加到<span>和<a>标记。试试下面的解决方案，希望你帮忙。

<强> HTML

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;