html - 如果太长，行内 block div 中的段落将推到 div 下方

我一直试图在一个 div 中将一些文本垂直居中，浏览 StackOverflow 一段时间后我终于想到了这个:

.frame {
  height: 500px;
  border: 2px solid black;
}
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.centerText {
  display: inline-block;
  vertical-align: middle;
}

<div class="col-md-8">
  <div class="frame">
    <span class="helper"></span>
    <div class="centerText">
      <p>This is a short paragraph.</p>
      <br />
      <p>More stuff.</p>
      <br />
      <br />
      <p>etc.</p>
    </div>
  </div>
</div>

当我有一个简短的段落时，这很好用，如上所述。但是我尝试更改该段落，发现当我将其设置得足够长以至于必须转到另一行时，整个段落都移到了“框架”div 下方。

参见此处:fiddle

如果我去掉跨度，那么长的段落将很好地转到框架内的下一行，但它不再垂直居中。

这是怎么回事？我怎样才能有一个长段落，而不是让所有文本都被推出 div？

最佳答案

去掉 .helper 中的 height: 100%。

这能解决您的问题吗？如果没有，请告诉我，以便我可以帮助您。干杯，

关于html - 如果太长，行内 block div 中的段落将推到 div 下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28005485/