I have an glyph icon with some text right next to it within a link. Here's jsFiddle.
The bottom part of the text is aligned with the bottom part of the icon but I'm not happy with that. I want to display the icon and then align the text in its middle, not to its bottom (as a side note notice that the icon's height is 14px and the text next to it is 16px). I've tried applying margin or padding to the top of the span containing the icon but that moves both of them down and the alignment between them stays the same. I need to either push the icon a couple or so pixels down or the text up but without moving the other. As simple as it sounds, I'm stuck with no solution. Ideas?
Add a new class with css property vertical-align:middle to the <span> and <a> tag. Try the below solution, hope you help this .
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"> text goes here</span>
</a>
</li>