html - 垂直居中带有背景图像的跨度

Question

我有一个未排序的链接列表，每个链接都包含一些文本和一个 span 元素。

<li class="ui-state-default"><a href="#pg-control">Control<span class="ui-icon ui-icon-right_arrow"></span></a></li>

我希望图标相对于 li 垂直居中显示(与文本内联)

这是我的CSS

li {
    line-height: 240%;
    display: block;
    border-bottom: 1px solid #666;
    padding: 5px;
}

li a {
    text-decoration: none;
    color: #000;
    display: block;
}

.ui-icon {
    width: 24px;
    height: 24px;
    float: right;
    display: inline-block;
}

注意 我没有使用 jQuery，我确实意识到我的类名是相同的。那只是巧合。

Answer 1

您可以将图标移动为 li 的背景，或者:

给 li 相对定位然后给图标绝对定位。将图标放置在距离顶部 50% 的位置，然后在图标高度的上半部分减去边距。这将使图标垂直居中。

li {
    position: relative;
    line-height: 240%;
    display: block;
    border-bottom: 1px solid #666;
    padding: 5px;
}

li a {
    text-decoration: none;
    color: #000;
    display: block;
}


.ui-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -12px
    width: 24px;
    height: 24px;
    display: inline-block;
}