javascript - jQuery "Cycle"插件导致内容不居中，我该如何解决？

Question

我正在尝试使用 jQuery“Cycle”插件 (http://jquery.malsup.com/cycle/) 来轮换位于 <span> 内的推荐信s ... 但是插件导致我的内容不居中。昨天早上这里有人指出了<span>元素由插件绝对定位:$slides.css({position: 'absolute', top:0, left:0}).hide()

我不了解 JS，而且我仍在研究我的 HTML/CSS，所以我希望这里有人知道这个问题的解决方案并且可以帮助我。如果不是哦:/

我试过添加 left:50%虽然它居中，但幻灯片坏了，我所有的<span> s 立即出现。

[编辑]

这是 HTML 和 CSS:

<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
}

独自一人，一切都按计划进行。然后我添加 jQuery/Cycle 插件:

// set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z;
        if (opts.backwards)
            z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
        else
            z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

这就是搞砸一切的原因。事实上，<span> s 一次显示一个，并像预期的那样淡入淡出，除了文本由于绝对定位而不再居中。所以我改变了left:0至 left:50% -哇啦!已解决问题的文本居中，除了现在所有跨度都同时显示并且没有淡入/淡出。

Answer 1

如果没有代码，调用起来并不容易，但我假设推荐书位于某种 block 元素中。如果你申请position:relative对于那个元素绝对定位 <span> s 将包含在其中。您不应该真正对 span 本身应用任何定位样式 - 而是将其留给插件。

希望对你有帮助

---

编辑

好的，试试这个:

.slideshow {
    width:940px;
    height:64px;
    background-image:url(../images/quotes.png);
    position:relative;
    }

.slideshow span {
    display:block;
    }

您可能需要手动设置 <spans> 的宽度s 也要匹配 div.slideshow 的宽度