jCarousel Lite - center images horizontally and vertically

Question

I have jCarousel Lite going in Drupal with images of various sizes/aspect ratios. I'm not having much luck trying to center the images vertically and horizontally (i.e. evenly-spaced). The plugin requires that the images be in a <ul><li><img ... /></li></ul>. I've tried display:inline-block, marginTop:50% among other things, most of which just screw up the carousel.

The carousel is posted at: http://carillontech.org/drupal/

thanks!!

Answer 1

One way you could do this, since you're using jQuery already on the page, is getting the image height for each image, subtracting that from the height of the carousel, and appling a top margin of half that value to the image or to the parent li.

Something like this:

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

You'd need to adjust #carousel with the actual id you're using, but it should work this way.

Answer 2

Thanks for the hints. It's sort of a cop out, but the easiest solution has just been to extend the image canvases so that they're all the same size. If the background color ever changes, I'll have to go back and change it in the images (since jpg doesn't do transparency), but at least it works consistently on every browser (unlike CSS).