Centrer verticalement le div dans BxSlider Carousel

CSS tables

Normalement, tant que support pour la version IE7 ou plus tôt n'était pas nécessaire, je suggère l'ajout de display: table-cell; (le long des lignes de la question @darthmaim lié ci-dessus):

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

Cependant, display: table-cell; ne fonctionne pas sur flottait éléments (testé avec IE8/9/10, Firefox, Safari, Chrome, Opera), comme le montre cette JSFiddle Démo. Dans le question @darthmaim liés à, le parent de l'élément est celui qui flottait; cela fonctionne bien. Ici, l'enfant de l'élément est flottant; qui ne fonctionne pas.

Solution de contournement

Si vous modifiez le code source HTML est une option, vous pouvez ajouter un div wrapper à l'intérieur de chaque .bxslider-innerde sorte que l'utilisation de display: table-cell; peut être déplacé à un non-flotté élément: Mise à jour de la démo.

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

Cela suppose que le carrousel conteneur est destiné à avoir une hauteur fixe de 90px. Soutenir une variable-hauteur du conteneur (qui varie en fonction de la hauteur de la plus haute carrousel élément), nécessitent un travail supplémentaire.

JavaScript

Si vous modifiez le code source HTML n'est pas une option, il existe deux solutions à l'aide de JavaScript ou jQuery:

1. Dynamiquement injecter div wrappers du type décrit ci-dessus, plutôt que de les ajouter à la statique HTML: Mise à jour de la démo
2. Dynamiquement ajouter la quantité appropriée de haut espacement à chaque élément, basé sur le calcul de la hauteur de chaque élément.

Vous pouvez le faire en ajoutant top:30px

Ici vertical-align ne fonctionne pas parce que dans le bxslider-inner div il ajoute style de sorte qu'il ne s'applique pas vertical-align ici. Donc, dans ce cas vous pouvez utiliser top pour que element.

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

Cela devrait résoudre votre problème:

JSfiddle

Et un avec différentes hauteurs: 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());
    });
});

Garder à l'esprit que le calcul moyen est très dépendant de l'autre la hauteur des variables comme le rembourrage, la marge et les frontières. Si vous ajoutez des styles comme ça, gardez à l'esprit que vous devez ajouter à ceux du calcul. Une autre option est d'utiliser box-sizing: border-box;tout cela s'effondre à l'intérieur de la div.

bxslider-inner DOIVENT avoir une hauteur, ou vous avez besoin de quelque sorte chercher le calcul de DOM hauteur de l'éviter. Si vous voulez vraiment, s'il vous plaît laissez une note et je vais le regarder.

Bonne chance!

Mise à JOUR

• JSfiddle mis à jour, ne devrait pas bloqué dans une boucle maintenant.
• Testé avec une trop grande hauteur, le code ne semble pas casser, mais peut-overflow hidden
• Regarder http://bxslider.com/options (> Rappels > onSlideAfter). Vous pouvez faire des modifications après chaque cycle si nécessaire. Ici, vous pouvez modifier votre code à nouveau si nécessaire pour le teint