html - 文本链接上的 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>

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

如何使 > 图标始终与 a 标签的中间垂直对齐？

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

Answer 1

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

position:relative;

并将此类也添加到您的 css 中:

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

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

Fiddle