jCarousel Lite - imágenes del centro horizontal y verticalmente

Question

Tengo jCarousel Lite va en Drupal con imágenes de diversas relaciones de tamaños / de aspecto. No estoy teniendo mucha suerte tratando de centrar las imágenes en vertical y horizontal (es decir, espaciados uniformemente). El plugin requiere que las imágenes sean en un <ul><li><img ... /></li></ul>. He intentado display:inline-block, marginTop:50% entre otras cosas, la mayoría de los cuales solo tornillo hasta el carrusel.

El carrusel está publicada en: http://carillontech.org/drupal/

Gracias !!

Answer 1

Gracias por los consejos. Es una especie de policía a cabo, pero la solución más fácil simplemente ha sido extender los lienzos de imágenes para que sean todos del mismo tamaño. Si el color de fondo cambia nunca, voy a tener que volver atrás y cambiarlo en las imágenes (jpg, ya no hace la transparencia), pero al menos funciona constantemente en todos los navegadores (a diferencia de CSS).

Answer 2

Una forma de poder hacer esto, ya que estás usando jQuery ya en la página, es conseguir la altura de la imagen para cada imagen, restar que a partir de la altura del carrusel, y appling un margen superior de la mitad de ese valor a la imagen o para la li padres.

Algo como esto:

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

Se necesitaría para ajustar #carousel con el identificador real que está utilizando, pero debería funcionar de esta manera.