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

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

我会使用绝对定位。 Change it to 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 */
}

为避免潜在的重叠（根据您的评论），然后将li 上的右侧填充增加img like so 的宽度：

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