jQuery cycle plugin problems

Question

I'm currently experiencing some problems with the jQuery cycle plugin while attempting to cycle through a string of divs.
The text is vertical-align: middle; but as soon as a new div is added and the plugin is initiated the text aligns to the top of the page.
Here's my code:
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();
        });

A working demo here too: http://jsfiddle.net/ZdLHh/
I was trying to add more .text slides and cycle through them in a loop, while retaining them being aligned to the middle of the page but as soon as another slide is added and the plugin is fired the text is aligned to the top of the page?
Can't seem to figure it out

Leniel Maccaferri · Accepted Answer · 2013-01-26T15:48:44.343

0

I changed your code in some places, here's it working with top: 50% !important in class text.

Here's the Demo: http://jsfiddle.net/leniel/ZdLHh/3/

edited Jan 26 '13 at 15:48

answered Jan 26 '13 at 15:14

Leniel Maccaferri

100,159
46
371
480

that doesn't seem to be aligning to the middle but just 100px from the top? Is there a reason it's not retaining it's vertical align: middle attribute? – user1374796 Jan 26 '13 at 15:32

score 0 · Answer 2 · answered Apr 30 '13 at 17:26

You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.

So the structure would look something like this:

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

With the following css:

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

You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/

jQuery cycle plugin problems

2 Answers2