在jQuery移动列表视图中水平对齐缩略图

问题描述

我使用的CSS代码覆盖了jQuery mobile使用的默认值：

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

这是为了使我的非平方图像在我们的不同项目列表。

这是我的列表的代码（简化为快速参考）：

 code>< ul id =listadata-role =listviewdata-filter =truedata-filter-reveal =truedata-filter-placeholder =Search ... inset =trueclass =has-odd-thumb> 
< li>< a href =＃id =1class =item-lista> 
< div class =thumbContainer> 
< img src =img / test.jpg> 
< / div> 
< h2>< i> Item< / i>< / h2> 
< p>说明文字< / p> 
< / a>< / li>< / ul> 
  

直到现在一切正常，我有的图像拟合在80px方形缩略图内，但我的问题是如果图像较宽（矩形），则它不会出现在缩略图的正方形空间中心。它看起来与左对齐。
如何让图片以该正方形空间为中心？

感谢

$ b b

已编辑：

解决方案

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

这个答案不覆盖纵向矩形...这就是为什么我' d推荐背景图片或Javascript方法。

I'm new working with listviews in jQuery mobile.

The CSS code i'm using to override the default used with jQuery mobile is:

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

This is to make my non-squared images fit correctly when they are thumbnails in the different items in my list.

This is the code to my list (simplified for quick reference):

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

Until now everything works fine, I have the images fitted inside the 80px square thumbnail, but my problem is if the image is wider (a rectangle) it doesn't appear centered in the square space of the thumbnail. It appear aligned to the left.How can I make the image centered in that square space?

Thanks

EDITED:

解决方案

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

This answer does not cover with portrait rectangles... which is why I'd recommend the background image or Javascript methods.

这篇关于在jQuery移动列表视图中水平对齐缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！