jCarousel Lite - 水平和垂直居中图像

Question

我在 Drupal 中使用了 jCarousel Lite，其中包含各种尺寸/长宽比的图像。我没有太多运气尝试将图像垂直和水平居中（即均匀间隔）。该插件要求图像位于

中。我尝试过 display:inline-block、marginTop:50% 等等，其中大多数只是搞砸了轮播。

轮播发布于：http://carillontech.org/drupal/

谢谢！！

Answer 1

由于您已经在页面上使用了 jQuery，因此您可以执行此操作的一种方法是获取每个图像的图像高度，从轮播的高度中减去该高度，然后将该值的一半应用于图像或家长李。

像这样的事情：

$('#carousel img').each(function() {
   marginTop = ($('#carousel').outerHeight(false) - $(this).outerHeight(false)) / 2;
   if(marginTop > 0) {
      $(this).css({'margin-top':marginTop});
   }
});

您需要使用您正在使用的实际 id 调整#carousel，但它应该以这种方式工作。

Answer 2

感谢您的提示。这有点逃避，但最简单的解决方案就是扩展图像画布，使它们的大小相同。如果背景颜色发生变化，我将不得不返回并在图像中更改它（因为 jpg 不透明），但至少它在每个浏览器上一致地工作（与 CSS 不同）。