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 コードの 2 番目の段落のコメントを外すと、表示がうまくいきません。(jsfiddle からコメントを削除して実行します)。

n段落がスペースなしで上下に整列するように CSS で作成する方法は?

最初のケースでは、表示は (良いです):

2番目のケース、良くない:

私の期待：

Answer 1

これはどう：

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

Answer 2

コード構造は

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

Answer 3

以下を使用

.test {
    背景色 : #ccc;
    高さ: 120px;
    表示: テーブルセル;
    垂直整列: 中央;    
} </pre>

サンプル: http://jsfiddle.net/codebombs/st3aB/