jQuery Mobile Listview 缩略图对齐

Question

我正在使用 JQuery Mobile listview 创建带有缩略图的项目列表。

如何为 Listviews 中使用的缩略图设置对齐方式？

我尝试使用align、vertical-align 设置图像的样式属性，甚至用<center> 标记包装图像，但它不起作用。

我也尝试了margin-top，但这不起作用，因为无论其高度如何，它都会将所有拇指向下推。我只想垂直和水平居中小于 80 x 80 像素的图像。

我想将图像水平和垂直对齐到中心。

Answer 1

JQuery mobile 将以下样式应用于您的ui-li-icon：

.ui-li-icon {
     position: absolute;
     left: 1px;
     top: 0;
     max-height: 80px;
     max-width: 80px;
 }

为了不破坏现有的实现，您可以将图标图像包装在另一个标签中，例如：

<li>
   <a href="#p1">
         <p class="my_icon_wrapper">
              <img src="images/myicon_image." width="32" height="32"/>
             </p>
        <h3>List item title</h3>
        <p>List item description</p>
   </a>
</li>

my_icon_wrapper 可以实现一些 jQuery Mobile 所做的样式，例如：

.my_icon_wrapper {
        float: left; 
        width: 80px; height: 80px;
        text-align: center; 
        vertical-align: middle; 
}

您需要稍微调整一下样式才能获得所需的效果。