使顯示：表格單元格堆疊在彼此之上？

Question

我正在構建一個tumblr模板。在tumblr，有一個變量，名爲{content}並且它可以包含一個或多個<p>標籤都有效

<p>Foo</p> 
<p>Bar</p> 

我想要垂直居中一個div裏面的內容，無論文字的大小或數量段落。

我使用的顯示：表小區techinque這裏描述： http://css-tricks.com/vertically-center-multi-lined-text/

總之，添加

display: table; 

到包含對象和

display: table-cell; 
    vertical-align: middle; 

到對象你想垂直居中。

當你只有一個p標籤時，這個工程很棒。但是，如果有多個，它們不會垂直流動，而是水平流動。你有什麼可以做的嗎？

樣品： http://jsfiddle.net/dBPF2/1/

Answer 1

我想你需要圍繞你設置爲顯示<p>標籤另一種含對象：表細胞，而不是設置顯示：表細胞的<p>標籤本身。

<div class="content"> 
    <div class="inner"> 
    <p>Foo</p> 
    <p>Bar</p> 
    </div> 
</div> 

.content {display:table;} 
.inner {display:table-cell; vertical-align:middle;} 

Answer 2

你想要做這個嗎？

<div> 
    <p>First paragraph.</p> 
    <p>Second paragraph.</p> 
</div> 

CSS：

div { 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px dotted gray; 
    height: 200px; 
} 

http://jsfiddle.net/audetwebdesign/dBPF2/