文本链接上的Bootstrap3图标对齐方式

Question

请参阅this example I wrote，这是我的代码的基本结构：

<a class="st-list-item" href="blah">Note2: blah blah blah 
    <span class="glyphicon glyphicon-chevron-right st-gray pull-right"></span>
</a>

当我缩小屏幕宽度时，＆gt;图标出现在第二行：

如何制作＆gt;图标总是看起来与标签的中间垂直对齐？

我不一定要使用标签，但它是一个链接，应该是可点击的。

谢谢！

Answer 1

您应该将此css添加到.st-list-item：

position:relative;

并将此类添加到您的CSS中：

.glyphicon{
    position:absolute;
    right:0;
    top:40%;
}

您可以使用媒体查询为每个屏幕宽度范围指定顶部测量值，因此它将始终垂直居中。

Fiddle