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

【问题标题】：jCarousel Lite - center images horizontally and verticallyjCarousel Lite - 水平和垂直居中图像
【发布时间】：2010-04-19 03:17:20
【问题描述】：

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

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

谢谢！！

【问题讨论】：

查看blog.themeforest.net/tutorials/vertical-centering-with-css

标签： jquery css drupal jcarousellite

【解决方案1】：

您可以这样做的一种方法，因为您已经在页面上使用 jQuery，所以获取每个图像的图像高度，从轮播的高度中减去该高度，并将该值的一半的上边距应用到图像或给父李。

类似这样的：

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

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

【讨论】：

谢谢——我会试一试。我希望有一个干净整洁的 CSS 答案，但我不知道是否有。

【解决方案2】：

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

【讨论】：