文本链接上的Bootstrap3图标对齐

Question

请看我写的这个例子 ，这是我的代码的基本结构：

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

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

如何使>图标始终看起来与标签中间垂直对齐？

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

谢谢！

Answer 1

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

position:relative;

并将该类也添加到您的CSS中：

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

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

小提琴