div中的中间文本

Question

为什么这个例子中的文本：http://jsfiddle.net/7EYZe/不在垂直中心？

我怎么才能把课文中间？

编辑：

现在我有两行或更多行的文本：http://jsfiddle.net/7EYZe/12/

我怎样才能正确地显示这个？

Answer 1

下面的css将使用填充而不是高度将文本居中到div中：

 .centerText
    {
        padding: 90px 0;
        font-size: 18px;
        border:solid 1px #000;
    }

Answer 2

这是对vertical-align的错误使用。它不知道要垂直对齐自己的对象是什么。

下面是一个动态的无表解决方案：http://jsfiddle.net/imoda/7EYZe/14/

<style type="text/css">
    div {
        height:200px;    
        width:200px;
        border:solid 1px black;
    }

    .aligner {
        height: 100%;
        width: 0;
        display: inline-block;
        vertical-align: middle;
    }

    .align {
        display: inline-block;
        vertical-align: middle;
    }
</style>

<div>
    <span class="aligner"></span>
    <span class="align">blabla</span>
</div>

Answer 3

添加文本对齐:居中；并显示:表格单元格；将其居中。

div {
    height:200px;    
    width:200px;
    border:solid 1px black;
    text-align: center;
    vertical-align:middle;
    display: table-cell;
}