Question

我正在尝试将div s保留在循环中的文本，以父元素为中心。当只有一个引用div时，这样可以正常工作。一旦我有一个以上并且他们骑自行车，他们看起来左对齐。

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

Answer 1

您好我找到了一些解决方案：

直接更改您的样式并设置a标记的样式：

首先，您需要将width设置为100% ---为什么我使用!important因为插件使用基于Windows大小的新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为left并更改{{1 } 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

您可能还想在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/

Jquery循环 - 中心div

4 个答案: