Jcarousel Lite - центральные изображения горизонтально и вертикально

Question

У меня есть Jcarousel Lite в Drupal с изображениями различных размеров / аспектных соотношений. Мне не повезло, пытаясь центрировать изображения по вертикали и горизонтали (то есть равномерно распределено). Плагин требует, чтобы изображения были в <ul><li><img ... /></li></ul>. Отказ я пробовал display:inline-block, marginTop:50% Среди прочего, большинство из которых просто захватывают карусель.

Карусель размещена на: http://carillontech.org/drupal/

Спасибо!!

Answer 1

Спасибо за намеки. Это своего рода ссора, но самое простое решение было только что продлить пособие изображения, чтобы они были все одинаковыми. Если фоновый цвет когда-либо меняется, мне придется вернуться назад и изменить его на изображениях (поскольку JPG не делает прозрачность), но, по крайней мере, он работает последовательно на каждом браузере (в отличие от CSS).

Answer 2

Один из способов сделать это, поскольку вы используете jQuery уже на странице, получает высоту изображения для каждого изображения, вычитая, что с высоты карусели и нанесение верхнего запаса половины этого значения к изображению или родитель Ли.

Что-то вроде этого:

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

Вам нужно будет настроить #carousel с фактическим идентификатором, который вы используете, но он должен работать таким образом.