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;
}

もう1つ...あなたの例と一致させるために、あなたがした後にに変更slideMargin:20してくださいslideMargin:10float: none !important;

フィドル： http： //jsfiddle.net/sSqAx/9/

于 2013-03-24T04:10:51.253 に答える
3

CSS テーブル

通常、IE7以前のサポートが必要ない限り、 （上記にリンクされた質問@darthmaimdisplay: table-cell;の行に沿って）追加することをお勧めします：

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

ただし、このJSFiddle Demodisplay: table-cell;に示されているように、浮動要素 (IE8/9/10、Firefox、Safari、Chrome、Opera でテスト済み) では機能しません。リンクされた@darthmaimの質問では、要素の親は浮かんでいるものです。それはうまくいきます。ここでは、子要素がフロートされています。それはうまくいきません。

回避策

HTML ソース コードの編集がオプションである場合は、 each 内に div ラッパーを追加し.bxslider-innerて、 の使用を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 を使用した 2 つの解決策があります。

  1. 静的 HTML に追加するのではなく、上記のタイプの div ラッパーを動的に挿入します:更新されたデモ
  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

これで問題が解決するはずです：

JSフィドル

そして、高さが異なるもの: 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 に答える
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 に答える