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/