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

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

如果是我，我会将箭头设为background-image li之类的内容：

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

I've coded an example...