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

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

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

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