Question

在开始时，这是fiddle。

我想要一个<ul>，其中每个<li>都有<p>，然后在rhs上浮动一个图标。该段落可能需要1-4行，我希望无论如何都能让图标恰好位于线条的中间位置。双重包裹<p>是必要的，相信我:)

<p>的宽度必须小于100％，无论图标需要多少空间。基本上，我希望图标位于<p>右边距左侧空间的一半。

解决方案here使用background-image，但这对我没有好处，因为图片必须作为移动设备的可拖动句柄。（我正在使用this approach修改用于触摸屏的jQuery可排序桌面网站。）

由于jsfiddle的要求，小提琴使用了占位符<img>，但我实际上会使用<a>与精灵中的图像。

我想避免使用负上边距，因为边距将移动到前一行并且可能弄乱拖动（即，您可能无意中拖动了错误的线）。

感谢。

Answer 1

基于this answer bfrohs，

DEMO here

<强> HTML

  <ul>
    <li class="absoluteCenterWrapper">
        <p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
        <img class="icon" src="http://placekitten.com/g/20/20">
    </li>
</ul>

<强> CSS

.text {
    margin-right:35px;
}

.absoluteCenterWrapper {
    position:relative;
}

.icon {
     margin:auto;
     position:absolute; 
     max-height:100%;
     max-width:100%;
     top:0;
     bottom:0;
     right:0;
}

Answer 2

将li元素的位置更改为绝对位置，将img的位置更改为绝对位置。请考虑添加此代码，而不是使用您的CSS。

.icon{
margin:40% 5%;
float:right;position:absolute;
}

看到这个小提琴。

http://jsfiddle.net/NXWPE/47/

CSS：每个<li>的图标浮动在行的中间</li>

2 个答案: