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

您需要在每个循环项目内嵌套两个 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/

于 2013-04-30T17:26:11.617 回答