Question

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

目前在示例中我设置了一个非常简单的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:10更改为float: none !important;

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

Answer 2

CSS表格

通常，只要不需要支持IE7或更早版本，我建议添加display: table-cell;（与上面链接的question @darthmaim一致）：

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

但是，display: table-cell;不适用于浮动元素（在IE8 / 9/10，Firefox，Safari，Chrome，Opera中测试过），如JSFiddle Demo所示。在链接到的question @darthmaim中，元素的父元素是浮动的元素;工作正常。这里的子元素是浮动的;这不起作用。

解决方法

如果编辑HTML源代码是一个选项，您可以在每个.bxslider-inner内添加div包装器，以便display: table-cell;的使用可以移动到非浮动元素：{{3 }}

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

这假定转盘容器的固定高度为90px。支持可变高度的容器（根据最高转盘元件的高度而变化）需要额外的工作。

<强>的JavaScript

如果不能编辑HTML源代码，则有两种使用JavaScript或jQuery的解决方案：

动态注入上述类型的div包装器，而不是将它们添加到静态HTML中：Updated demo

根据每个元素的计算高度，为每个元素动态添加适当数量的顶部间距。

Answer 3

我们可以通过在css中添加“vertical-align：middle”并向外部div提供fixesd高度来将div对齐到中心。 OR 我们可以通过 margin-top 进行设置，也可以在css中使用 top 属性

Answer 4

您可以通过添加top:30px

来实现

此处vertical-align不起作用，因为在bxslider-inner div中它添加了额外的style，因此此处不会应用vertical-align。因此，在这种情况下，您可以top使用element。

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

Answer 5

设置值slideMargin：0和slideWidth：100

有效。

Answer 6

这可以解决您的问题：

JSfiddle

一个具有不同高度的人：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());
    });
});

请记住，计算出的中间值非常依赖于其他高度变量，如填充，边距和边框。如果添加这样的样式，请记住需要将这些添加到计算中。另一种选择是使用box-sizing: border-box;，因此所有这些都会折叠到div的内部。

bxslider-inner必须有一个高度，或者您需要以某种方式获取计算出的DOM高度以避免它。如果你真的想要，请留言，我会调查一下。

祝你好运！

<强>更新

JSfiddle已更新，现在不应该陷入循环。
经过高度测试，代码似乎没有中断，但可能会溢出到隐藏
查看http://bxslider.com/options（＆gt;回调＆gt; onSlideAfter）。如果需要，您可以在每个周期后进行修改。如果肤色需要，您可以在这里再次修改代码

在BxSlider Carousel中垂直居中对齐div

6 个答案: