html 文本链接上的Bootstrap3图标对齐

fzwojiic 于 2023-04-18 发布在 Bootstrap

关注(0)|答案(1)|浏览(110)

请看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标签的中间垂直对齐？
我不一定要使用一个标签，但它是一个链接，应该是可点击的。

1条答案

你应该把这个css添加到你的.st-list-item中：

position:relative;

并将这个类添加到你的css中：

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

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