我在 Drupal 中安装了 jCarousel Lite,其中包含各种尺寸/纵横比的图像。尝试将图像垂直和水平居中(即均匀间隔)我没有太多运气。该插件要求图像位于<ul><li><img ... /></li></ul>
. 我已经尝试过display:inline-block
,marginTop:50%
除其他外,其中大部分只是搞砸了旋转木马。
轮播发布在:http ://carillontech.org/drupal/
谢谢!!
我在 Drupal 中安装了 jCarousel Lite,其中包含各种尺寸/纵横比的图像。尝试将图像垂直和水平居中(即均匀间隔)我没有太多运气。该插件要求图像位于<ul><li><img ... /></li></ul>
. 我已经尝试过display:inline-block
,marginTop:50%
除其他外,其中大部分只是搞砸了旋转木马。
轮播发布在:http ://carillontech.org/drupal/
谢谢!!
由于您已经在页面上使用 jQuery,因此您可以执行此操作的一种方法是获取每个图像的图像高度,从轮播的高度中减去该高度,并将该值的一半的上边距应用于图像或父母李。
像这样的东西:
$('#carousel img').each(function() {
marginTop = ($('#carousel').outerHeight(false) - $(this).outerHeight(false)) / 2;
if(marginTop > 0) {
$(this).css({'margin-top':marginTop});
}
});
您需要使用您正在使用的实际 id 调整#carousel,但它应该以这种方式工作。
感谢您的提示。这是一种逃避,但最简单的解决方案就是扩展图像画布,使它们都具有相同的大小。如果背景颜色发生变化,我将不得不返回并在图像中更改它(因为 jpg 不做透明度),但至少它在每个浏览器上都能始终如一地工作(与 CSS 不同)。