jQuery循环插件问题答案

【问题标题】：jQuery cycle plugin problemsjQuery循环插件问题
【发布时间】：2013-05-01 01:26:11
【问题描述】：

我目前在尝试循环遍历一串 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 幻灯片并循环浏览它们，同时保持它们与页面中间对齐，但只要添加另一张幻灯片并触发插件，文本就会对齐到页面顶部？
看不懂

【问题讨论】：

标签： jquery css jquery-cycle

【解决方案1】：

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

这里是演示：http://jsfiddle.net/leniel/ZdLHh/3/

【讨论】：

这似乎没有与中间对齐，但距离顶部仅 100px？是否有理由不保留它的垂直对齐：中间属性？

【解决方案2】：

您需要在每个循环项内嵌套两个 div。第一个必须有显示：inline-table；第二个必须有 display: table-cell;这两个 div 都有垂直对齐：中间。

所以结构看起来像这样：

<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/

【讨论】：