jquery – 在BxSlider旋转木马中垂直中心对齐div

我正在使用 bxslider脚本来构建转盘.我可以做的一切都很好,我只是有一个问题,试图将对齐中心的幻灯片垂直,因为他们没有相同的高度.我尝试过许多对齐技术,但是当bxslider处于动作状态时,似乎都失败了.这是一个 jsfiddle example.

目前在示例中,我设置了一个非常简单的CSS规则,当没有设置轮播时,该规则是有效的：

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

但是,正如你在jsfiddle中看到的那样,当旋转木马活动时,垂直对齐方式不再工作.

我开始怀疑我可能需要更改脚本的核心代码来实现这一点.

解决方法

像这样更新你的CSS.关键是不浮动元素,因为你总是使它成为内嵌块

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

另外一件事…为了使它与你的例子相匹配,在你完成float之后,将slideMargin：20改为slideMargin：10; none！important;

小提琴：http://jsfiddle.net/sSqAx/9/