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

我目前有一个项目列表。有些项目是一行文字，有些项目是两行文字，中间有一个分隔符

我无法将图像垂直对齐到文本右侧。当只有一行文字时，我可以很容易地对齐，但如果有多行文字，图像会挂在顶部

<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>

下面是一个发生了什么的例子

---

我会使用绝对定位，其中包含以下修改后的代码：

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

的宽度：

---

@迈克尔：在

li

（参见答案的修订版）上加上空格来纠正这个错误。我真傻，竟然错过了。谢谢最后，我用表格单元格得出了相同的结果，但我更喜欢你用绝对定位法得出的结果。

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