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 like so的宽度增加img上的右侧填充：

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

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

1 个答案: