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

Question

我在 Drupal 中安装了 jCarousel Lite，其中包含各种尺寸/纵横比的图像。我没有太多运气尝试将图像垂直和水平居中(即均匀间隔)。该插件要求图像位于 <ul><li><img ... /></li></ul> 中。 .我试过了 display:inline-block , marginTop:50%除其他外，其中大部分只是搞砸了轮播。

轮播张贴在:http://carillontech.org/drupal/

谢谢!!

Answer 1

由于您已经在页面上使用了 jQuery，因此您可以执行此操作的一种方法是获取每个图像的图像高度，从旋转木马的高度中减去该高度，并将该值一半的上边距应用到图片或给父 li。

像这样:

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

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