Question

我正在尝试循环遍历一串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幻灯片并循环浏览它们，同时保持它们与页面中间对齐，但是一旦添加了另一张幻灯片并且插件被触发了文本是否与页面顶部对齐？
似乎无法弄清楚

Answer 1

我在某些地方更改了您的代码，这是在top: 50% !important课程中使用text。

以下是演示：http://jsfiddle.net/leniel/ZdLHh/3/

Answer 2

您需要在每个循环项目中嵌套两个div。第一个必须有display：inline-table;第二个必须有显示：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/

jQuery循环插件问题

2 个答案: