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

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

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

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

Answer 2

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

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

此外，您需要避免位置：绝对;

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

Answer 3

尝试使用display:table的div，然后使用display: table-cell在您想要文本的div中。这应该是垂直对齐，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 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/