Vertikal zentrieren-align div in BxSlider Karussell

CSS-Tabellen

Normalerweise, solange die Unterstützung für IE7 oder früher war nicht nötig, ich würde vorschlagen, hinzufügen von display: table-cell; (entlang der Linien von der Frage @darthmaim im Zusammenhang mit oben):

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

Jedoch display: table-cell; funktioniert nicht auf den gefloateten Elementen (getestet in IE8/9/10, Firefox, Safari, Chrome, Opera), wie in diesem JSFiddle Demo. In der Frage @darthmaim verbunden, die das übergeordnete Element des Elements ist derjenige, der schwebte; das funktioniert auch. Hier wird das child-element schwebte; das funktioniert nicht.

Abhilfe

Wenn die Bearbeitung des HTML-Quellcodes ist eine option, können Sie fügen Sie ein div-wrapper in jedem .bxslider-inner, so dass die Verwendung von display: table-cell; können verschoben werden, um eine nicht-gefloateten-element: Aktualisierte demo.

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

Dies setzt Voraus, dass die carousel-container ist beabsichtigt, eine Feste Höhe von 90px. Unterstützt eine variable Höhe-container (die variiert, basierend auf der Höhe der höchsten Karussell-element), würde erfordern zusätzliche Arbeit.

JavaScript

Wenn die Bearbeitung des HTML-Quellcodes ist nicht eine option, es gibt zwei Lösungen mit JavaScript oder jQuery:

1. Dynamisch injizieren div-Wrapper der oben beschriebenen Art und, anstatt das hinzufügen, um die statischen HTML: Aktualisierte demo
2. Dynamisch fügen Sie die entsprechende Menge an top-Abstand zu jedem element, basierend auf der berechneten Höhe von jedem element.

InformationsquelleAutor Matt Coughlin

Können Sie es durch hinzufügen top:30px

Hier vertical-align hat nicht funktioniert, weil in der bxslider-inner div es fügt zusätzliche style damit es nicht anwenden vertical-align hier. Also, in diesem Fall können Sie top für das element.

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

InformationsquelleAutor Rohan Kumar

Dieser sollte dein problem lösen:

JSfiddle

Und eine mit verschiedenen Höhen: 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());
    });
});

Beachten Sie, dass die berechnete mittlere ist sehr abhängig von anderen die Höhe der Variablen wie padding, margin und Grenzen. Wenn Sie fügen Sie Stile hinzu, wie, dass, Bedenken Sie, dass Sie benötigen, fügen Sie diese in die Berechnung ein. Eine weitere option ist die Verwendung box-sizing: border-box;, also all das bricht auf der Innenseite der div.

bxslider-inner MUSS eine Höhe, oder Sie müssen irgendwie Holen die berechneten DOM-Höhe zu vermeiden. Wenn Sie wirklich wollen, lassen Sie bitte eine Anmerkung und ich werde das prüfen.

Glück!

UPDATE

• JSfiddle aktualisiert, sollten Sie nicht stecken in einer Schleife jetzt.
• Getestet mit einer zu hohen Höhe, code scheint nicht zu brechen, aber vielleicht overflow auf hidden
• Blick auf http://bxslider.com/options (> Rückrufe > onSlideAfter). Sie können die änderungen nach jedem Zyklus, wenn nötig auch. Hier können Sie den code so ändern, bei Bedarf wieder für Teint

InformationsquelleAutor