css - 在 jQuery 移动 ListView 中水平对齐缩略图

Question

我刚开始使用 jQuery Mobile 中的 ListView 。

我用来覆盖 jQuery Mobile 默认使用的 CSS 代码是:

<style type="text/css">
.has-odd-thumb li a {
padding-left: 90px !important;
padding-top: 0px;
padding-bottom: 0px;
}
.thumbContainer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.thumbContainer img {
    display: block;
    margin: auto;
    max-height: 80px;
}
</style>

这是为了让我的非方形图像在我的列表中的不同元素中是缩略图时正确适合。

这是我列表中的代码(经过简化以便快速引用):

<ul id="lista" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search..." data-inset="true" class="has-odd-thumb">
<li><a href="#" id="1" class="item-lista">
<div class="thumbContainer">
<img src="img/test.jpg">
</div>
<h2><i>Item</i></h2>
<p>Description text</p>
</a></li></ul>

到现在为止一切正常，我将图像安装在 80 像素的正方形缩略图内，但我的问题是如果图像更宽(矩形)，它不会显示在缩略图正方形空间的中心。它看起来与左侧对齐。我怎样才能使图像在那个方形空间居中？

谢谢

已编辑:

Answer 1

Example

.thumbContainer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.thumbContainer img {
    position: relative;
    left: -50%;
    margin-left: 50%;
    display: block;
    margin: auto;
    max-height: 80px;
}

这个答案不包括纵向矩形......这就是为什么我推荐背景图像或 Javascript 方法。