jQuery Mobile缩略图图像对齐

Question

我已经阅读了有关该主题的其他问题，但它们从未真正解决过。

我需要将listview的缩略图设置为居中。 那些缩略图有一个最大高度，但我的一些图标小于最大高度。将固定填充设置为缩略图不适用于不同的缩略图大小。

小图标：

更大的图标：

我的列表项目：

<%
boxFolder.each(function(box){
name = box.get("name");
fullPath = box.get("fullPath");
type = box.get("type");
%>
<li data-theme="c">
    <%if(type == "dir"){ %>
        <a data-transition="slide" class="folderSelectedButton" id=<%=fullPath%>>
            <img src="images/FolderDark.png">
            <h3><%=name%></h3>
            <p>Folder</p>
        </a>
    <%}else if(type == "jpg"){%>
        <a data-transition="slide" id=<%=fullPath%>>
            <img src=<%=fullPath%>>
            <h3><%=name%></h3>
            <p>Picture</p>
        </a>
    <%}else{%>
        <a data-transition="slide" id=<%=fullPath%>>
            <img src="images/FolderDark.png">
            <h3><%=name%></h3>
            <p>Unknown</p>
        </a>
    <%}%>

</li>
<%
})
%>

编辑：结果现在看起来：

我将此添加到ezankers解决方案中：

.imgListThumb {
   max-width: 80px;
   max-heigth: 80px;
}

<img class="imgListThumb" src=<%=fullPath%>>

Answer 1

你可以用一点CSS和绝对定位来做到这一点。这是 DEMO FIDDLE

在列表标记中，我已将图像放在具有类thumbContainer的容器DIV中：

<ul data-role="listview" data-inset="true" class="has-odd-thumb">
  <li>
    <a href="#"></a>
    <div class="thumbContainer">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRwORNdHugDJUxgJtt93q_SBwQWDv-0Fd2-0BdjR9GMcUHeY6TjUg"
      alt="Image" />
    </div>
    <h2>Twitter</h2>
    <p>48x48 twitter icon</p>
  </li>
  <li>
    <a href="#"></a>
    <div class="thumbContainer">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQOKCKGeC_BlmlgKLzfn8iHBVmAIi-X8mdKO7BuYrtkRDfqwO22jg"
      alt="Image" />
    </div>
    <h2>Facebook</h2>
    <p>24x24 facebook icon</p>
  </li>
  <li>
    <a href="#"></a>
    <div class="thumbContainer">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSVPHOXJ_tD2Q5A55B92WZAvacsgvJOwePHh2qJvzkMZDRff3Oe"
      alt="Image" />
    </div>
    <h2>iTunes</h2>
    <p>64x64 iTunes icon</p>
  </li>
</ul>

CSS为LI文本添加左边距，为缩略图留出空间。然后将容器绝对放在左边，宽度等于边距。最后，图像居中。

.has-odd-thumb .ui-link-inherit {
    margin-left: 90px !important;
}
.thumbContainer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 90px;
}
.thumbContainer img {
    bottom: 0; left: 0;top: 0; right: 0;
    margin: auto;
    position: absolute;
}

您可以调整边距/宽度，使其适用于图像尺寸......