jquery - 水平居中滚动列表

Question

我正在尝试让文本循环遍历短语列表，显示在同一行上，并且无论字符串长度和屏幕大小如何都居中。通过在 SE 上找到一个线程，我已经能够让文本循环显示在同一行上。我现在遇到的问题是试图在育儿 div 中将该文本居中。字符串的长度都不同，因此我无法设置宽度，并且

需要绝对定位，以便它们显示在同一行上。

我一直在绞尽脑汁想如何实现这一目标，并且让 Google 和我自己都筋疲力尽。有谁知道如何实现这种效果？

关于我目前拥有的 JSfiddle:http://jsfiddle.net/eh3sxko8/

html:

<div class="container">
 <ul id="cyclelist">
    <li>Some Title</li>   
    <li>Another Title</li>
    <li>Yet another</li>
 </ul>   
</div>

CSS:

.container{
width:100%;
}

ul#cyclelist {
position:relative;
overflow:hidden;
height:50px;
}
ul#cyclelist li {
opacity:0;
position:absolute;
overflow:hidden;
}

js:

$(document).ready(function() {

 var j = 0;
 var delay = 2000; //millisecond delay between cycles
 function cycleThru(){
         var jmax = $("ul#cyclelist li").length -1;
         $("ul#cyclelist li:eq(" + j + ")")
                 .animate({"opacity" : "1"} ,400)
                 .animate({"opacity" : "1"}, delay)
                 .animate({"opacity" : "0"}, 400, function(){
                         (j == jmax) ? j=0 : j++;
                         cycleThru();
                 });
         };

 cycleThru();

 });

Answer 1

请检查: jsFiddle .

CSS:

ul#cyclelist {
    padding-left: 0px;
}

ul#cyclelist li {
    width: 100%;
    text-align: center;
}