Question

我一直试图在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>

如上所述，当我有一个短段时，这可以正常工作。但是我尝试改变段落，发现当我把它做得足够长以至于它必须转到另一条线上时，整个段落都移到了＃34;框架下面＃34; DIV。

见这里：fiddle

如果我拿走了跨度，那么长段落将会移到框架内的下一行就好了，但它不再垂直居中。

这里发生了什么？我怎么能有一个长段不会使所有文本被推出div？

Answer 1

摆脱height: 100%中的.helper。

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

Answer 2

在此尝试： - 我还在<p>元素中添加了一些填充，因此它不会拥抱div的边缘。

＆＃13;

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

＆＃13;

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

＆＃13;

我希望这会有所帮助

Answer 3

你的问题是帮助器，centerText块和它们之间的空间宽度超过100％，因此centerText块溢出框架外。

要修复，请调整辅助对象的水平边距以补偿空间。这没有神奇的价值 - 它取决于容器的字体 - 但在你的jsfiddle例子中，-4px的值是有效的。（.helper { margin-left:-4px; }）

请参阅http://jsfiddle.net/tngqjswm/18/

_{除了1：有other ways of removing/hiding the space between inline-level elements}
_{Aside 2：辅助跨度是被CSS中的伪元素替换的良好候选者。请参阅http://jsfiddle.net/tngqjswm/19/}

Answer 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

内联块div中的段落如果太长则推到div下方

4 个答案: