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

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;
}

另外，您需要避免position：absolute;

.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/