Vertically center-align div in BxSlider Carousel

bxslider, carousel, css, jquery

Solution

Update your CSS like this. The key is not `float`ing 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/

Problem

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.

Original source

Related problems