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

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

JQuery Mobile Listview缩略图对齐

1 个答案: