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

您可以调整边距/宽度以使其适合您的图像尺寸...