Jquery循环-中心divs

我试图用循环中的文本保持

div

s，以父元素为中心。当只有一个quote

div

时，这可以正常工作。一旦我有一个以上的，他们是骑自行车，他们似乎左对齐

---

一种方法是像这样更改

scrollRight

效果，使用

left:50%

和宽度为其一半的负

边距将子元素居中，并更改
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 };
};


您可能还想使用
quoterate
上的
text align:center
将文本居中对齐
这是您想要实现的吗

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

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

看看小提琴：
您好，我为您找到了一些解决方案：


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

首先，您需要将
宽度设置为
100%
——为什么我要使用
！重要信息
，因为插件仅在开始时根据窗口大小使用新的
宽度
创建内联样式，因此您可以让center调整窗口大小

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

其次，为内部元素设置
宽度
和
边距
：

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

请参见此处的演示

我可以提出的第二个选择是利用我找到的这个附加组件

另一方面，你应该延长暂停时间，在它循环之前很难阅读所有内容。这不是他所要求的。他希望引号在页面上居中对齐。尝试调整窗口的大小，您将看到报价的容器确实与页面对齐。例如，Yes timeout就是temp。真实站点将有更长的超时时间。@kei我更新了我的解决方案，以便它解决真实站点的问题question@user1110562另一方面，请注意，如果尽可能增加窗口的大小，请尽量不要将内联样式和样式表混合在一起，您会看到发生了什么是的，它并不总是居中，这取决于浏览器的大小。在应用jQuery cycle时，它似乎覆盖了一些CSS，但我不知道为什么或是什么。不，我需要以父div为中心的整个div（.quoteroate）。
.quoteroate{width:600px；height:160px；margin left:auto；margin right:auto；font size:22px；color:#000000；vertical align:middle；}< /代码>添加了最后一行“垂直对齐：中间”；这是一种在中间对齐div的方法。尝试将基于px的宽度设置为父级（μtxTrtTATE），并设置基于百分比的QuoToToTAT的宽度。就像这个：从这里看起来确实不错。
 #txtRotate {
   width: 100% !important;
 }
 .quoteRotate {
   width: 100% !important;
 }

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