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; 
}

您需要稍微使用这些样式才能获得所需的效果.