在一条线内居中放置一个字形图标

我有一个带有一些文字的字形图标，它在一个链接的旁边。 Here's jsFiddle。在一条线内居中放置一个字形图标

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

来源

2016-03-08 mmvsbg

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

来源

2016-03-08 13:58:51

谢谢！实际上有许多可用的选项作为垂直对齐的值，允许不同的布局组合。 – mmvsbg

在一条线内居中放置一个字形图标

回答

相关问题