jQuery的“循环”插件导致的内容不是中心,我怎么能解决这个问题?
-
27-09-2019 - |
题
我试图使用jQuery的“循环”插件(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 /循环插件:
// 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%
- WHA啦!问题解决文本居中,除了现在的跨距都显示在同一时间和还有的进/出没有褪色。
解决方案
如果没有代码,这是不容易的呼叫,但我假定证明书是某种类型的块元件内。如果你申请position:relative
到该元素的绝对定位<span>
s将被包含在内。你真的不应该施加任何定位样式的跨度自己 - 而是留给插件
希望帮助
修改强>
好尝试这样:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
您可能需要手动设置<spans>
s的宽度以及以匹配div.slideshow
不隶属于 StackOverflow