javascript - 仅在 <div> 中心显示一个列表项，并溢出 :hidden

Question

我正在尝试一种垂直的滚动条，它依次显示一些文本列表项，但我需要一些帮助来定位它们。

您将看到一个包含两个元素的网络代码。要一次仅显示一项，我必须在 #tickerContainer 中设置“overflow:hidden”。

但是，股票代码中的文本并未位于股票代码的中心(如您所见，它位于底部)。

此外，当我从 #tickerContainer 中删除“overflow:hidden”时，整个股票代码会从页面顶部移开吗？

请帮我解决这个问题。 http://jsfiddle.net/nodovitt/NYhY4/2/

<div id="tickerContainer">
    <ul id="ticker" class="js-hidden">
        <li class="news-item">Item Number 1</li>
        <li class="news-item">Item Number 2</li>
    </ul>
</div>

jQuery 函数:

<script>
function tick() {
    $('#ticker li:first').slideUp(1000, function () {
        $(this).appendTo($('#ticker')).slideDown(1000);
    });
}
setInterval(function () {
    tick()
}, 2000);
</script>

CSS:

#tickerContainer {
    background-color:white;
    border-radius:15px;
    text-align:center;
    margin:10px;
    box-shadow:0 0 8px black;
    color:#2B7CD8;
    font-size:50px;
    width:500px;
    height:100px;
    overflow:hidden;

}
.news-item {
    font-family:Times New Roman;
    font-style:oblique;
}
#ticker li {
    list-style-type:none;
}

Answer 1

您尚未对您的股票代码 ID 指定任何规范。所以像这样http://jsfiddle.net/NYhY4/10/

#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}