Jquery cycle - center divs

Question

I am trying to keep divs with text that are on a cycle, centered within the parent element. This works fine when there is only one quote div. Once I have more than one and they are cycling, they appear left justified.

http://jsfiddle.net/k8UvP/

$(document).ready(function () {
    $('#txtRotate').cycle({
        fx: 'scrollRight',
        timeout: 3,
        cleartypeNoBg: true
    });
});

Answer 1

Hi i found some solutions for you :

• One change your styles and style your a tag directly:

  First you need to set the width to 100% --- why i use !important because the plugin makes inline style with new width based on windows size only at begin, with this you can have center even resizing the window.

   #txtRotate {
     width: 100% !important;
   }
   .quoteRotate {
     width: 100% !important;
   }
  

  Second you set width and margin for your elements inside:

   .quoteRotate a, .quoteRotate .author {
     display:block;
     width:600px;
     margin:auto;
   }
  

  See the demo here http://jsfiddle.net/k8UvP/25/

• The second option i can propose is make use of this add-on i found http://jquery.malsup.com/cycle2/demo/center.php.

Answer 2

Is this what you want to achieve? http://jsfiddle.net/MPt73/

#txtRotate {
    font-family:'Montserrat', sans-serif;
    width: 100%;
    height: 160px;
    text-align:center;
}

Answer 3

One way to do it would be to change the scrollRight effect like so, centering the child element using left:50% and a negative margin-left of half its width and changing the left position of txtRotate

$(document).ready(function () {
    $('#txtRotate').cycle({
        fx: 'scrollRight',
        timeout: 900,
        cleartypeNoBg: true
    });
    $('.quoteRotate').css({'left':'50%', 'margin-left':'-300px'});
});

$.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push($.fn.cycle.commonReset);
    var w = $cont.width();
    opts.cssFirst = { left: 0 };
    opts.cssBefore= { left: -w, top: 0 };
    opts.animIn   = { left: "50%" };
    opts.animOut  = { left: 2*w };
};

Updated jsFiddle

You might also want to use text-align:center on quoteRotate to center align the text

Answer 4

I've add some colors to identify. Well I think using percentage in .quoteRotate is better.

.quoteRotate {
    position: absolute;
    width: 60%;
    height: 160px;
    margin-right: 20%;
    margin-left: 20%;
    font-size: 22px;
    color: #000000;
    background: #f2f2f2;
    display: block;
}

Take a look at Fiddle: http://jsfiddle.net/k8UvP/5/