10

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

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

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

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

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

4

6 回答 6

16

像这样更新你的 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/

于 2013-03-24T04:10:51.253 回答
3

CSS 表格

通常，只要不需要对 IE7 或更早版本的支持，我建议添加display: table-cell;（按照上面链接的问题@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中所示。在@darthmaim 链接到的问题中，元素的父元素是浮动的；效果很好。这里子元素是浮动的；那是行不通的。

解决方法

如果编辑 HTML 源代码是一个选项，您可以在 each 中添加一个 div 包装器.bxslider-inner，以便可以将使用display: table-cell;移至非浮动元素：更新 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：更新的演示
  2. 根据计算的每个元素的高度，为每个元素动态添加适当数量的顶部间距。
于 2013-03-24T03:19:43.767 回答
1

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

于 2013-03-24T12:43:29.100 回答
0

设置值 slideMargin:0 和 slideWidth: 100

有用。

于 2013-03-21T10:13:55.783 回答
0

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

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

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

于 2013-03-21T06:34:02.803 回答
0

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

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 (> Callbacks > onSlideAfter)。如果需要，您也可以在每个周期后进行修改。如果肤色需要，您可以在此处再次修改代码
于 2013-03-24T13:37:34.163 回答