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

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

我会使用绝对定位。 将其更改为此 ，其中包含以下经过修改的代码：

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 */
}