Question

我正在尝试使用jQuery“Cycle”插件（http://jquery.malsup.com/cycle/）来旋转位于内的推荐信...但是该插件正在导致我的内容不要居中昨天早上有人在这里指出元素被插件绝对定位：$slides.css({position: 'absolute', top:0, left:0}).hide()

我不知道JS，我仍然在研究我的HTML / CSS，所以我希望有人能在这里找到解决方法并帮助我。如果不是哦：/

我已尝试添加left:50%，虽然它居中，但幻灯片已损坏，我的所有都会立即出现。

[编辑]

这是HTML＆amp; 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)
    });

这就是搞砸了。同样地， s一次显示一个，并且像它们应该的那样淡入淡出，除了文本由于绝对定位而不再居中。所以我将left:0更改为left:50% - 哇啦啦！问题解决的文本是居中的，除了现在所有的跨度都显示在同一时间并且没有淡入/淡出。

Answer 1

没有代码，这不容易调用，但我认为推荐是在某种块元素内。如果您将position:relative应用于该元素，则绝对定位的将包含在其中。您不应该将任何定位样式真正应用于跨度本身 - 而是将其留给插件。

希望有所帮助

修改

好的，试试这个：

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

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

jQuery“循环”插件导致内容不居中，我该如何解决这个问题？

1 个答案: