jquery - jQuery Mobile listview 缩略图图像对齐

Question

嗨，我添加了一个带有缩略图的列表视图

使用

<ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d">
<li><a href="image.php?imgid=2">  
    <img src="../images/comma.png" class="ui-li-thumb" />  
    <h3 class="ui-li-heading">Colleeeeeeeeeeeeege</h3>  
    <p class="ui-li-desc">by Scott Hill</p></a></li> 
</ul>

并获取图像但不在中心如何将其放入缩略图区域

在这里看图片

非常感谢您的帮助

Answer 1

我遇到过同样的问题。我添加了以下事件来设置所需的顶部填充。

$("img[class='ui-li-thumb']").load(function() {
    $(this).css('padding-top',((80-this.height)/2));
});

Answer 2

如果您已固定列表视图中每个列表的高度，那么您可以为 img 标签提供 margin-top 并进行调整以使其居中

<style>
.listex{
height:50px;
}
 .ui-li-thumb{
   margin-top:10px;
 }
</style>
<ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d">
   <li class="listex"><a href="image.php?imgid=2">  
       <img src="../images/comma.png" class="ui-li-thumb" />  
       <h3 class="ui-li-heading">Colleeeeeeeeeeeeege</h3>  
       <p class="ui-li-desc">by Scott Hill</p></a>
   </li> 
</ul>

您应该相应地设置 height 和 margin-top 的值。