2

divの文字列を循環しようとしているときに、現在jQueryサイクルプラグインでいくつかの問題が発生しています。
テキストはですvertical-align: middle;が、新しいdivが追加され、プラグインが開始されるとすぐに、テキストはページの上部に配置されます。
これが私のコードです：
HTML：

<div id="splash-container" style="background-color: #fac4c8; color: #003738">

    <div class="slides">

        <div class="text">
            test-01
        </div>

    </div>  
</div>

CSS：

#splash-container {
    position: fixed;
    z-index: 9998;
    height: 100%;
    width: 98%;
    left: 1%;
    cursor: pointer;
}

.slides {
    position:relative;
    display: table;
    vertical-align: middle;
    left: 0px;
    height:100%;
    width:100%;

}

.text {
    display: table-cell;
    vertical-align: middle;
    font-family:'Avenir LT W02 65 Medium', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 12px;
    text-align: left;
    padding-left: 20%;
    padding-right: 20%; 
}

jQuery：

$(function() {
$('.slides').cycle();
        });

ここでも動作するデモ：http：//jsfiddle.net/ZdLHh/ スライドをさらに追加して、ページの中央に揃えたまま、別のスライドが追加されるとすぐに、ループで循環
させようとしていました。.textプラグインが起動され、テキストがページの上部に配置されますか？
それを理解できないようです

4

2 に答える 2

0

いくつかの場所でコードを変更しました。これtop: 50% !importantがクラスでの動作textです。

デモは次のとおりです：http：//jsfiddle.net/leniel/ZdLHh/3/

于 2013-01-26T15:14:43.720 に答える
0

各サイクル アイテム内に 2 つの div をネストする必要があります。1 つ目は次のように表示する必要があります: inline-table; 2 番目には、display: table-cell; が必要です。これらの div には両方とも vertical-align: middle があります。

したがって、構造は次のようになります。

<div class="slide-container">
    <div class="slide">
        <div class="outer-container">
            <div class="inner-container">
                Centered content
             </div>
        </div>
    </div>

    <div class="slide">
        <div class="outer-container">
            <div class="inner-container">
                Centered content
             </div>
        </div>
    </div>
 </div>

次のCSSを使用：

.slide-container {
    height: 300px;
}
.outer-container {
    height: 300px;
    display: inline-table;
    vertical-align: middle;
}
.inner-container{
    vertical-align: middle;
    display: table-cell;
}

ここで動作していることがわかりますhttp://jsfiddle.net/alsweeet/H9ZSf/6/

于 2013-04-30T17:26:11.617 に答える