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

我有jCarousel Lite会在Drupal中使用各种尺寸/长宽比的图像。我没有太多的尝试将图像垂直和水平居中（即均匀间隔）。该插件要求图像位于<ul><li><img ... /></li></ul>。我尝试过display:inline-block,marginTop:50%等，其中大部分只是旋转木马。jCarousel Lite - 水平和垂直居中图像

转盘被张贴在：http://carillontech.org/drupal/

谢谢！

来源

2010-04-19 carillonator

退房http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – 2010-04-20 19:14:40

感谢您的提示。这是一个警察，但最简单的解决方案只是扩大图像画布，使他们都是相同的大小。如果背景颜色发生变化，我必须返回并在图像中进行更改（因为jpg不会透明），但至少它可以在每个浏览器上始终如一地工作（与CSS不同）。

来源

2010-04-20 21:06:18 carillonator

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

事情是这样的：

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

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

来源

2010-04-19 14:52:24 bobsoap

谢谢 - 我会给它一个镜头。我希望有一个很好的干净的CSS答案，但我不知道是否有一个。 – carillonator 2010-04-20 00:01:21

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

回答

相关问题