Jcarousel Lite - Imagens centrais horizontalmente e verticalmente

Question

Eu tenho o jcarousel Lite em Drupal com imagens de vários tamanhos/proporções. Não estou tendo muita sorte tentando centralizar as imagens verticalmente e horizontalmente (ou seja, espaçadas uniformemente). O plugin exige que as imagens estejam em um <ul><li><img ... /></li></ul>. eu tentei display:inline-block, marginTop:50% Entre outras coisas, a maioria das quais apenas estraga o carrossel.

O carrossel está publicado em: http://carillontech.org/drupal/

obrigado!!

Answer 1

Obrigado pelas dicas. É uma espécie de policial, mas a solução mais fácil foi estender as telas de imagem para que elas sejam do mesmo tamanho. Se a cor do plano de fundo mudar, terei que voltar e alterá -lo nas imagens (já que o JPG não faz transparência), mas pelo menos funciona de forma consistente em todos os navegadores (ao contrário do CSS).

Answer 2

Uma maneira de fazer isso, já que está usando o jQuery na página, está obtendo a altura da imagem para cada imagem, subtraindo -a da altura do carrossel e de uma margem superior da metade desse valor para a imagem ou para o pai li.

Algo assim:

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

Você precisaria ajustar o #carousel com o ID real que está usando, mas deve funcionar dessa maneira.