如何使display: table-cell属性的元素叠放在一起？

Question

我正在制作Tumblr的模板。在Tumblr中，有一个名为{content}的变量，它可能包含一个或多个<p>标签。

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

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

我使用了在此处描述的display: table-cell技术：http://css-tricks.com/vertically-center-multi-lined-text/

简单来说，你需要添加以下代码：

  display: table; 

指向包含对象和

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

垂直居中的对象是指你希望让其垂直居中的对象。

当你只有一个 p 标签时，这种方法非常好用。但是当你有多个标签时，它们并不会垂直流动，而是水平流动。有没有什么办法可以解决这个问题呢？

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

- Himmators

---

你尝试过将 p 标签的 width 固定为某个值吗？ - Joum

不起作用：http://jsfiddle.net/dBPF2/2/ - Himmators

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/

- Marc Audet

---

你为什么改变了显示类型？ - Marc Audet

哦！对不起，我以为你在试图在 jsfiddle 中重新创建我所做的事情。 - Himmators

你的解决方案也可以工作！然而，我在一些教程中读到过，对于具有display: table-cell属性的元素，应该在其包含元素上添加一个display标签，我不确定为什么，可能是某些浏览器需要它。这对于未来的访问者来说是好事情，值得知道。 - Himmators

如果这些人告诉你的是真的，那么你的未来将会非常美好！祝你一切顺利！ - Marc Audet

Answer 2

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

- andi

---

.content包装器并不是必需的。我的答案和这个答案都会导致相同的布局。 - Marc Audet

返回翻译后的文本：true，但考虑到OP代码中的未知因素，我认为这是一个更安全的起点。 - andi