Вертикально выравнивание по центру div в карусели BxSlider

Я использую bxslider script для создания карусели. Я могу сделать все хорошо, у меня просто проблема с выравниванием, чтобы центрировать слайды по вертикали, так как они не имеют одинаковой высоты. Я пробовал многочисленные методы выравнивания, но все, кажется, терпят неудачу, когда bxslider работает. Здесь пример jsfiddle.

В этом примере я установил очень простое правило CSS, которое работает, когда карусель не установлена:

.bxslider-inner {
   vertical-align: middle;
    display: inline-block;
}

Но, как вы можете видеть в jsfiddle, когда карусель активна, вертикальное выравнивание больше не работает.

Я начинаю подозревать, что мне, возможно, придется изменить основной код script, чтобы достичь этого.

Ответ 1

Обновите свой CSS следующим образом. Ключ не float элемента, потому что вы всегда делаете его inline-block

.bxslider-inner {
    vertical-align: middle;
    display: inline-block;
    float: none !important;
}

Еще одна вещь... Чтобы сделать это в соответствии с вашим примером, измените slideMargin:20 на slideMargin:10 после того, как вы сделали float: none !important;

Fiddle: http://jsfiddle.net/sSqAx/9/

Ответ 2

таблицы CSS

Обычно, если поддержка IE7 или ранее не нужна, я бы предложил добавить display: table-cell; (в соответствии с вопросом @darthmaim linked выше):

.bxslider-inner {
    display: table-cell;
    vertical-align: middle;
}
...
<div class="bxslider-inner"><div>Content goes here</div></div>

Однако display: table-cell; не работает с плавающими элементами (тестируется в IE8/9/10, Firefox, Safari, Chrome, Opera), как показано в этом JSFiddle Demo. В вопросе @darthmaim, связанном с, родителем элемента является тот, который плавает; это прекрасно работает. Здесь находится дочерний элемент; это не работает.

Обход

Если редактирование исходного кода HTML является опцией, вы можете добавить обертку div внутри каждого .bxslider-inner, так что использование display: table-cell; можно перенести в неплавающий элемент: Обновлено демо.

.bxslider-inner > div {
    display: table-cell;
    vertical-align: middle;
    height: 90px;
}
...
<div class="bxslider-inner"><div><div>Content goes here</div></div></div>

Это предполагает, что контейнер для каруселей имеет фиксированную высоту 90px. Поддержка контейнера переменной высоты (который зависит от высоты самого высокого карусельного элемента) потребует дополнительной работы.

JavaScript

Если редактирование исходного кода HTML не является вариантом, есть два решения, использующих JavaScript или jQuery:

Динамически вводить обертки div описанного выше типа, а не добавлять их в статический HTML: Обновленная демонстрация
Динамически добавлять соответствующее количество верхнего интервала для каждого элемента, исходя из вычисленной высоты каждого элемента.

Ответ 3

Мы можем вертикально выровнять div в центре, добавив в css "vertical-align: middle" и давая высоту fixesd внешнему div. ИЛИ, мы можем установить margin-top или также использовать атрибут top в css

Ответ 4

Вы можете сделать это, добавив top:30px

Здесь vertical-align не работает, потому что в bxslider-inner div он добавляет дополнительные style, поэтому здесь не применяется vertical-align. Итак, в этом случае вы можете использовать top для этого element.

Fiddle http://jsfiddle.net/sSqAx/3/

Ответ 5

Задайте значения slideMargin: 0 и slideWidth: 100

Он работает.

Ответ 6

Это должно устранить вашу проблему:

JSfiddle

И один с разной высотой: JSfiddle

HTML

<div class="bxslider">
    <div class="bxslider-inner"><div style="width:80px; height:80px; background:#CCC; padding:5px;"></div></div>
    <div class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;"></div></div>
    <div class="bxslider-inner"><div style="width:80px; height:10px; background:#6699cc; padding:5px;"></div></div>
    <div class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;"></div></div>
</div>

CSS

body {
    background: orange;
    margin-top: 50px;
}

.bxslider-inner {
   vertical-align: middle;
    display: inline-block;
    height: 80px;
}

JavaScript

'use strict';

jQuery(document).ready(function(){
    jQuery('.bxslider').bxSlider({
        mode: 'horizontal',
        speed: 500,
        slideMargin:20,
        infiniteLoop: true,
        pager: false,
        controls: true,
        slideWidth: 80,
        minSlides: 1,
        maxSlides: 5,
        moveSlides: 1
        }
    });

    // Initial
    $('.bxslider-inner').each(function(){
        var height_parent = $(this).css('height').replace('px', '') * 1;
        var height_child = $('div', $(this)).css('height').replace('px', '') * 1;
        var padding_top_child = $('div', $(this)).css('padding-top').replace('px', '') * 1;
        var padding_bottom_child = $('div', $(this)).css('padding-bottom').replace('px', '') * 1;
        var top_margin = (height_parent - (height_child + padding_top_child + padding_bottom_child)) / 2;

        $(this).html('<div style="height: ' + top_margin + 'px; width: 100%;"></div>' + $(this).html());
    });
});

Имейте в виду, что вычисляемая середина очень зависит от других переменных высоты, таких как прокладка, граница и границы. Если вы добавите такие стили, помните, что вам нужно добавить их в расчет. Другой вариант - использовать box-sizing: border-box;, поэтому все это сбрасывается во внутреннюю часть div.

bxslider-inner ДОЛЖЕН иметь высоту, или вам нужно как-то получить рассчитанную высоту DOM, чтобы избежать ее. Если вы действительно этого хотите, пожалуйста, оставьте заметку, и я рассмотрю ее.

Удачи!

UPDATE

Обновлен JSfiddle, теперь он не должен застревать в цикле.
Протестировано со слишком высокой высотой, код, похоже, не сломается, но может переполняться скрытым
Посмотрите http://bxslider.com/options ( > Обратные вызовы > onSlideAfter). Вы можете делать изменения после каждого цикла, если это необходимо. Здесь вы можете изменить свой код еще раз, если это необходимо для лица