Question

我让Drupal的jCarousel Lite使用各种尺寸/宽高比的图像。我试图使图像垂直和水平居中（即均匀间隔）并没有太多运气。该插件要求图片位于<ul><li><img ... /></li></ul>。我已经尝试了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不同）。

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

2 个答案: