在动态高度无序列表中垂直对齐文本和图像

Question

我目前有一个项目列表。有些项目是单行文本，有些是 2 行，中间有中断。

我很难将图像垂直对齐到文本的右侧。当只有一行文本时，我可以轻松对齐，但多行时图像挂在顶部。

<ul>
    <li><a href="#"><img src=""/>Text Text Text<br/>Second Line of Text</a></li>
    <li><a href="#"><img src="" />Text Text Text</a></li>
    <li><a href="#"><img src="" />Text Text Text</a></li>
</ul>

下面是正在发生的事情的示例。

http://jsfiddle.net/SAwFE/

Answer 1

我会使用绝对定位。将其更改为 this，它具有以下改进的代码：

ul li {
    position: relative; /* added to your existing code */
}
img {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -10px; /* half height of image */
}

为避免潜在的重叠（根据您的评论），请按img宽度增加li上的右填充，如下所示：

ul li { 
    padding: 9px 32px 9px 12px; /* modified existing code */
    position: relative; /* added to your existing code */
}