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:20slideMargin: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 回答