javascript - 如何将文本放置在垂直对齐的中间？

Question

当它显示评论时，它不会在垂直对齐的中间显示评论。
如何让它显示在垂直对齐的中间？

这是电流输出。我希望它位于垂直对齐的中间。

Javascript

function showComments(time){
    var foundComments = findComments(time);
    $.each(foundComments,function(i,comment){
        $commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
        setComment(comment.message);
        $commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
    });
};

CSS

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
}

.newsticker p{
    height:100px;
    float:left;
    position:absolute;
}

HTML

    <div class="newsticker"> 
    </div>

Answer 1

只需在 CSS3 规则下方更新以使用“table-cell”和“vertical-align”，如下所示：

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
    display: table-cell;
    vertical-align: middle;
}

此外，您需要避免 position:absolute;

.newsticker p{
    height:100px;
    float:left;
    position:absolute;
}

Answer 2

尝试一个 div，display:table 然后在一个 div 中使用display: table-cell你想要的文本。那应该垂直对齐，JS Fiddle 是向下的，所以我不能给你看一个例子。

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
    display: table;
}

.newsticker p{
    padding-left:10px;
    padding-right:10px;   
    display: table-cell;
    vertical-align: middle;
}

Answer 3

如果是单行。div.newsticker将行高设置为例如 100px的高度。

例如 font: 16px/100px 'arial', sans-serif

Answer 4

<div>
<span class="newsticker"> 
</span></div>



div {
border: 1px solid black;
}
span.newsticker {
border: 1px solid transparent;
}
.newsticker p {
margin: 50px;
vertical-align: middle;
}

http://jsfiddle.net/azHVv/22/