css - jquerymobile 缩略图垂直对齐与长描述

Question

我应该怎么做才能使 ListView 中的缩略图垂直对齐？
ListView 项是从数据库动态生成的，因此列表项的高度会有所不同，因此在 css 中添加(填充/边距)top 属性是不可能的。

这是我的示例代码:

<ul>
<li><img src='The Thumbnail Image' /><h3>the list heading</h3><p>Long description here (white-space: normal)</p></li>
<li><img src='The Thumbnail Image' /><h3>the list heading</h3><p>Longer description here (white-space: normal)</p></li>
<li><img src='The Thumbnail Image' /><h3>the list heading</h3><p>Longest description here (white-space: normal)</p></li>
</ul>

也许这会让我的案例更清楚:http://jsfiddle.net/QdatL/

非常感谢任何帮助。

最好的问候，
阿尔文。

Answer 1

我添加了这段代码:

li {
   position: relative;   
}

img {
   position: absolute;
   top: 50%;
   left: 5px;
   margin-top: -40px; /* image height/2 */
}

成功了!

DEMO