jquery cycle - center divs

Question

我试图保留div s的文本位于父元素中间的循环中。当只有一个报价div时，这工作正常。一旦我有一个以上，他们骑自行车，他们似乎左对齐。

http://jsfiddle.net/k8UvP/

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

Answer 1

嗨，我找到了一些解决方案，为您提供：

• 一个改变你的风格和直接的风格你a标签：

  第一你需要设置width为100% ---为什么我使用!important因为th e插件仅在开始时根据窗口大小创建新的width内联样式，使用此功能，您甚至可以调整窗口大小。

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

  其次你里面的元素设置width和margin：

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

  看到这里演示http://jsfiddle.net/k8UvP/25/

• 第二个选择，我可以建议是利用这个添加 - 中我发现http://jquery.malsup.com/cycle2/demo/center.php。

Answer 2

一种方式做到这一点是改变像这样的scrollRight作用，围绕使用left:50%一半宽度的负margin-left和改变txtRotate

的 left位置的子元素

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

您可能还想使用text-align:center上quoteRotate中心对齐文本

Answer 3

这是你想要实现的？ http://jsfiddle.net/MPt73/

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

Answer 4

我添加了一些颜色来识别。 嗯，我认为在.quoteRotate中使用百分比更好。

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

在小提琴看看： http://jsfiddle.net/k8UvP/5/