Question

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

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

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

我使用了display：table-cell techinque： 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

我认为你需要在你设置显示的<p>标签周围另一个包含对象：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;}

显示：table-cell元素堆叠在一起？

2 个答案: