在 BxSlider Carousel 中垂直居中对齐 div

Question

我正在使用bxslider 脚本来构建一个轮播。我可以做得很好，我只是在尝试对齐以使幻灯片垂直居中时遇到问题，因为它们的高度不同。我尝试了许多对齐技术，但是当 bxslider 运行时似乎都失败了。这是jsfiddle example。

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

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

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

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

Answer 1

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; 的使用移动到非浮动元素：Updated demo。

.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 的解决方案：

1. 动态注入上述类型的 div 包装器，而不是将它们添加到静态 HTML：Updated demo
2. 根据每个元素的计算高度动态地为每个元素添加适当的顶部间距。

Answer 2

这应该可以解决您的问题：

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（>回调> onSlideAfter）。如果需要，您也可以在每个周期后进行修改。如果肤色需要，您可以在此处再次修改代码

Answer 3

像这样更新你的 CSS。关键不是floating 元素，因为你总是在制造它inline-block

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

还有一件事...要使其与您的示例相匹配，请在完成 float: none !important; 后将 slideMargin:20 更改为 slideMargin:10

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

Answer 4

我们可以通过在 css 中添加“vertical-align:middle”并为外部 div 提供固定高度来将 div 垂直对齐到中心。 OR我们可以通过ma​​rgin-top设置或者也可以在css中使用top属性

Answer 5

设置值slideMargin:0 和slideWidth: 100

有效。

Answer 6

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

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

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