Jquery 循环 - 中心 div答案

【问题标题】：Jquery cycle - center divsJquery 循环 - 中心 div
【发布时间】：2013-11-28 19:22:32
【问题描述】：

我试图将divs 与循环中的文本保持一致，并在父元素中居中。当只有一个引用 div 时，这很好用。一旦我有多个并且他们正在骑自行车，他们就会出现左对齐。

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

【问题讨论】：

标签： jquery css cycle

【解决方案1】：

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

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

首先，您需要将width 设置为100% --- 为什么我使用!important，因为该插件仅在开始时根据窗口大小使用新的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。

【讨论】：

【解决方案2】：

这是您想要实现的目标吗？ http://jsfiddle.net/MPt73/

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

【讨论】：

不，我需要以父 div 为中心的整个 div (.quoteRotate)。
.quoteRotate { width: 600px; height: 160px; margin-left: auto; margin-right: auto; font-size: 22px; color: #000000; vertical-align:middle; } 添加最后一行“vertical-align:middle;”这是一种在中间对齐 div 的方法。
尝试将基于 px 的宽度设置为父级 (#txtRotate)，并将 .quoteRotate 的宽度设置为基于百分比的宽度。像这个：jsfiddle.net/xibalbian/c922a/1 从这里看起来确实不错。

【解决方案3】：

这样做的一种方法是像这样更改scrollRight 效果，使用left:50% 和一个负的margin-left 使其宽度的一半居中，并更改left 的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

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

【讨论】：

附带说明，您应该设置更长的超时时间，在它循环之前很难全部阅读
这不是他要问的。他希望引号在页面上居中对齐。尝试调整窗口大小，您会发现引用的容器确实相对于页面右对齐。
是的，例如，超时只是临时的。真实站点的超时时间会更长。
@kei 我更新了我的解决方案以解决真正的问题
@user1110562 另一方面，尽量不要混合使用内联样式和样式表

【解决方案4】：

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

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

看看 Fiddle： http://jsfiddle.net/k8UvP/5/

【讨论】：

增加你的窗口大小，你会看到发生了什么
是的，它并不总是居中，具体取决于浏览器的大小。似乎jQuery循环在应用时覆盖了一些CSS，但我不知道为什么或什么。