在BxSlider Carousel中垂直居中对齐div

Question

我正在使用bxslider脚本来构建旋转木马.我可以做得很好,我只是试图对齐以垂直居中放置幻灯片,因为它们没有相同的高度.我已经尝试了很多对齐技术,但是当bxslider正在运行时似乎都失败了.这是一个jsfiddle例子.

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

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

但是,正如您在jsfiddle中看到的那样,当轮播处于活动状态时,垂直对齐不再起作用.

我开始怀疑我可能必须更改脚本的核心代码才能实现这一点.

Answer 1

像这样更新你的CSS.关键不float在于元素,因为你总是在制作它inline-block

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

还有一件事......为了使它与你的例子相符,在完成之后slideMargin:20改为slideMargin:10float: none !important;

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

Answer 2

您可以通过添加来做到这一点top:30px

这里vertical-align不起作用，因为bxslider-inner div它添加了额外的内容style，所以它不适用于vertical-align此处。因此，在这种情况下，您可以top使用element.

小提琴 http://jsfiddle.net/sSqAx/3/