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

Question

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

这是我的示例代码：

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

它奏效了！

演示