Vertically center-align div in BxSlider Carousel

Question

I'm using bxslider script to build a carousel. I can do everything fine, I'm just having a problem trying to align to center the slides vertically, as they don't have the same height. I've tried numerous align techniques, but all seem to fail when the bxslider is in action. Here's a jsfiddle example.

Currently in the example I've set a very simple CSS rule that works when the carousel is not set:

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

But, as you can see in the jsfiddle, when the carousel is active, the vertical alignment doesn't work anymore.

I'm starting to suspect I might have to change the core code of the script to achieve this.

Answer 1

Update your CSS like this. The key is not floating the element because you are always making it inline-block

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

One more thing... To make it match your example, change slideMargin:20 to slideMargin:10 after you have done the float: none !important;

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

Answer 2

CSS tables

Ordinarily, as long as support for IE7 or earlier wasn't needed, I'd suggest adding display: table-cell; (along the lines of the question @darthmaim linked to above):

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

However, display: table-cell; doesn't work on floated elements (tested in IE8/9/10, Firefox, Safari, Chrome, Opera), as shown in this JSFiddle Demo. In the question @darthmaim linked to, the parent of the element is the one that's floated; that works fine. Here the child element is floated; that doesn't work.

Workaround

If editing the HTML source code is an option, you can add a div wrapper inside each .bxslider-inner, so that the use of display: table-cell; can be moved to a non-floated element: Updated demo.

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

This assumes that the carousel container is intended to have a fixed height of 90px. Supporting a variable-height container (which varies based on the height of the tallest carousel element), would require additional work.

JavaScript

If editing the HTML source code isn't an option, there are two solutions using JavaScript or jQuery:

1. Dynamically inject div wrappers of the type described above, rather than adding them to the static HTML: Updated demo
2. Dynamically add the appropriate amount of top spacing to each element, based on the calculated height of each element.

Answer 3

We can vertcal align a div to the center by adding "vertical-align:middle" in the css and giving a fixesd height to the outer div. OR we can set by margin-top or can also use top attribute in css

Answer 4

You can do it by adding top:30px

Here vertical-align did not works because in the bxslider-inner div it adds additional style so it doesn't apply vertical-align here. So, in this case you can use top for that element.

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

Answer 5

Set the values slideMargin:0 and slideWidth: 100

It works.

Answer 6

This should fix your problem:

JSfiddle

And one with different heights: 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());
    });
});

Keep in mind that the calculated middle is very dependent on other height variables like padding, margin and borders. If you add styles like that, keep in mind that you need to add those to the calculation. Another option is to use box-sizing: border-box;, so all of that collapses to the inside of the div.

bxslider-inner MUST have a height, or you need to somehow fetch the calculated DOM height to avoid it. If you really want that, please leave a note and I'll look into it.

Good luck!

UPDATE

• JSfiddle updated, should not stuck in a loop now.
• Tested with a too high height, code doesn't seem to break, but might overflow to hidden
• Look at http://bxslider.com/options (> Callbacks > onSlideAfter). You can do modifications after each cycle if needed too. Here you can modify your code again if needed for complexion