html - 当我有多个段落时，div 上的垂直对齐文本不起作用

Question

我使用以下超简单的 HTML 代码：

<div class="test">
    <p>test 1234</p>
    <!--<p>test 5678</p>-->
</div>

和 CSS

.test {
    background: #ccc;
    height: 120px;
}

.test p {
    line-height: 120px;
}

Jsfiddle -> http://jsfiddle.net/wP9K3/

它工作正常

但是，如果我从上面的 HTML 代码中取消注释第二段，则显示效果不佳。（从 jsfiddle 中删除评论并运行它）。

如何在 CSS 中使n段落彼此对齐而没有空格？

在第一种情况下，显示是（很好）：

第二种情况，不好：

我的期望：

Answer 1

这个怎么样：

http://jsfiddle.net/wP9K3/5/

Answer 2

使用以下

​.test {
    背景颜色：#ccc；
    高度：120px；
    显示：表格单元格；
    垂直对齐：中间；    
}​</pre>

示例：http: //jsfiddle.net/codebombs/st3aB/

Answer 3

代码结构是

<style>
.test {
    background: #ccc;
    height: auto;
    width:100px;
}

.test p {
    line-height: 50px;
}
​&lt;/style>

<div class="test">
    <p>test 1234</p>
    <p>test 5678</p>
</div>

http://jsfiddle.net/wP9K3/16/