jquery - 居中对齐图像

Question

我有一个图像列表，其中一些图像的宽度我更喜欢，所以我裁剪它们，我设置了 overflow:hidden 以隐藏不必要的部分并避免缩放。我想要将这些图像居中，但对我没有任何帮助。我知道这是一个很受欢迎的问题，但没有一个答案对我有帮助。我想我犯了一个错误。比我更有经验的人能帮忙吗？

还添加了一些过渡效果。

 <div id="second" class="single">
     <ul>
         <li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li>
         <li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img src="images/album/8.jpg" alt=""/></a></li>
         <li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li>
         <li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li>
         <li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li>
         <li><a href="images/album/12.jpg" rel="lightbox[photos]"><img src="images/album/12.jpg" alt=""/></a></li>
     </ul>
  </div>  

CSS代码

.single ul {
  list-style-type: none;
}

.single li {
  padding: 0px; 
  width: 160px;
  height: 240px;
  margin: 10px;
  overflow: hidden;
  float: left;

  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}

.single img {
  height: 240px;

}

.single li:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
  box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

更新 1

图片列表如下。与其他图片相比，循环的图片宽度更大。它们被裁剪了。我想要居中的那些图片，以便能够看到图片的中间而不是左侧。

更新 2

无论图片的实际尺寸如何，缩略图必须有 160 像素的宽度和 240 像素的高度。有些照片在调整大小后完全适合。其他的因为宽度大于高度不合适。这就是为什么我裁剪它们，它们必须居中才能有意义。能够看到一张脸而不是人的肩膀。图片是在我的网页中动态添加的。

更新 3

960x640

640x960

Answer 1

没有看到图像真的很难，但一般来说你可以做的是:

1)给需要居中的图片加一个class，创意多我们就叫“居中”

<div id="second" class="single">
<ul>
<li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li>
<li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img class="centered" src="images/album/8.jpg" alt=""/></a></li>
<li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li>
<li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li>
<li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li>
<li><a href="images/album/12.jpg" rel="lightbox[photos]"><img class="centered" src="images/album/12.jpg" alt=""/></a></li>
</ul>
</div>

2) 添加等于溢出宽度一半的负左边距

例如，假设您的第二张图片的宽度为 200 像素。

.single li 是 160px，所以我们有 40px 溢出。你可以应用这个类:

.single img.centered {
    margin-left:-20px; /* half of the overflown width */
}

它会在中心被裁剪。 “Demo”。

附言如果你想让所有的图像都居中，显然你不需要添加类。

---

如果您需要更具体的答案，请提供图片的宽度/8。