images du centre horizontalement et verticalement - jCarousel Lite

Question

Je jCarousel Lite va dans Drupal avec des images de différentes tailles / rapports d'aspect. Je ne suis pas avoir beaucoup de chance en essayant de centrer les images verticalement et horizontalement (par exemple régulièrement espacées). Le plugin nécessite que les images soient dans un <ul><li><img ... /></li></ul>. J'ai essayé display:inline-block, marginTop:50% entre autres, dont la plupart juste bousiller le carrousel.

Le carrousel est affiché à: http://carillontech.org/drupal/

Merci !!

Answer 1

Merci pour les conseils. Il est en quelque sorte un flic out, mais la solution la plus simple vient d'être d'étendre les toiles d'image de sorte qu'ils sont tous de la même taille. Si la couleur de fond change jamais, je vais devoir revenir en arrière et changer les images (puisque jpg ne fait pas la transparence), mais au moins il fonctionne de manière cohérente sur tous les navigateurs (contrairement à CSS).

Answer 2

Une façon vous pouvez le faire, puisque vous utilisez jQuery déjà sur la page, est d'obtenir la hauteur de l'image pour chaque image, soustrayez de la hauteur du carrousel, et appling une marge supérieure de la moitié de cette valeur à la l'image ou à la li parent.

Quelque chose comme ceci:

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

Vous auriez besoin d'ajuster #carousel avec l'identifiant réel que vous utilisez, mais il devrait fonctionner de cette façon.