将跨度与背景图像垂直居中

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;
}

Answer 2

如果是我，我会将箭头设置为li的background-image，例如：

li{
  background:transparent url(the_arrow.jpg) no-repeat center right;
}

我编写了一个示例...