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

它有效！

<强> DEMO

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

1 个答案: