如果太长，内联块 div 中的段落被推到 div 下面答案

【问题标题】：Paragraph in inline-block div pushed below div if too long如果太长，内联块 div 中的段落被推到 div 下面
【发布时间】：2015-01-18 20:35:23
【问题描述】：

我一直试图在一个 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 的长段落？

【问题讨论】：

标签： html vertical-alignment css

【解决方案1】：

删除您的.helper 中的height: 100%。

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

【讨论】：

谢谢，但那是垂直居中的 - 如果它不在那里，段落不会在框架内垂直居中。除非文本足够长到可以进入第二行，否则它也不会出现问题。

【解决方案2】：

在这里试试这个： - 我还为 <p> 元素添加了一些填充，这样它就不会紧贴 div 的边缘。

.frame {
    height: 500px;
	border: 2px solid black;
}

.helper {
    display: inline-block;
    vertical-align: middle;
}

.centerText {
	display: inline-block;
	vertical-align: middle;
}
p {
    padding: 5px;
}

<div class="col-md-8">
	<div class="frame" id="frame2">
		<span class="helper"></span>
			<div class="centerText">
				<p>This is a long paragraph. Like realy long. Too long to fit on one line in the frame. Goes to the next line. Which should be ok but for some reason isn't.
				<br />
				More stuff.
				<br />
				<br />
				etc.</p>
            </div>
		</div>
</div>

希望对你有帮助

【讨论】：

谢谢，但是跨度中的 height: 100% 允许文本在框架中垂直居中，我仍然需要它。它适用于短文本，但由于某种原因不适用于长文本。

【解决方案3】：

您的问题是 helper、centerText 块和它们之间的空间超过 100% 宽度，因此 centerText 块溢出出框架。

要解决此问题，请调整助手的水平边距以补偿空间。这没有什么神奇的价值——它取决于容器的字体——但在你的 jsfiddle 例子中，-4px 的值是有效的。 (.helper { margin-left:-4px; })

见http://jsfiddle.net/tngqjswm/18/

_{Aside 1：有other ways of removing/hiding the space between inline-level elements}
_{Aside 2：helper span 非常适合在 CSS 中被伪元素替换。见http://jsfiddle.net/tngqjswm/19/}

【讨论】：

【解决方案4】：

将父.frame设置为display: table，将两个子设置为display: table-cell

.frame {
    height: 500px;
    border: 2px solid black;
    display: table;
}

.helper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

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

FIDDLE

【讨论】：