jQuery Mobile缩略图对齐 [英] jQuery Mobile thumbnail image alignment

问题描述

我已经读过关于这个主题的其他问题，但是它们从未真正解决过。

I already read the other questions about that topic, but they've never really been solved.

我需要设置列表视图的缩略图居中。
这些缩略图有一个最大高度，但我的一些图标小于最大高度。

I need to set the thumbnail of a listview centred. Those Thumbnails have a maximal heigt, but some of my Icons are smaller than the maximal height. Setting a fixed padding to the thumbnail doesn't work for different thumbnail sizes.

小图示：

较大的图示：

>

我的列表项：

<%
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解决方案：

I added this to ezankers solution:

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

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

推荐答案

。这是 DEMO FIDDLE

You can do this with a little CSS and absolute positioning. Here is a DEMO FIDDLE

在列表标记中，我将图像放在一个容器DIV中，并且有thumbContainer类：

In the list markup, I have placed the image inside a container DIV with class thumbContainer:

<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文本添加左边距，留下缩略图的空间。然后容器被绝对地放置在左边，宽度等于边缘。最后图片居中。

The CSS adds a left-margin to the LI text leaving room for the thumbnail. The container is then absolutely placed on the left with a width equal to the margin. Finally the image is centered.

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

您可以调整边距/宽度， ...

You can adjust the margin/width to make it work well with your image sizes...

这篇关于jQuery Mobile缩略图对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！