css - 制作显示：表格单元元素堆叠在一起？

Question

我正在构建一个 tumblr 模板。在 tumblr 中，有一个名为的变量{content}，它可能包含一个或多个<p>-tags

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

无论文本大小或段落数如何，我都试图将内容垂直居中在 div 内。

我使用了显示：此处描述的表格单元技术：http: //css-tricks.com/vertically-center-multi-lined-text/

简而言之，您添加

  display: table; 

到包含对象和

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

到要垂直居中的对象。

当您只有一个 p-tag 时，这非常有用。但是对于多个，它们不会垂直流动，而是水平流动。你有什么可以做的吗？

示例：http: //jsfiddle.net/dBPF2/1/

Answer 1

你想这样做吗？

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

Answer 2

我认为您需要在您设置为 display:table-cell 的标签周围设置另一个包含对象<p>，而不是将 display:table-cell 设置为<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;}