为什么这个技巧在动态高度div中垂直居中（以及为什么它会中断）？

Question

我发现这个stackoverflow answer非常有趣。它可以垂直居中任意高度div中任意长度的文本。基本上，它在包含文本的节点前面直接使用空<span>标记，并且

HTML：

<div>
    <span></span><p>This is really really long text but it will be centered vertically.</p>
</div>​

CSS：

div { 
    background: yellow; 
    color: red;
    width: 200px;
    text-align: center; /* horizontally center */
    height: 300px; /* any height */
    padding: 0 20px
}

div span:first-child {
    height: 100%;
    vertical-align: middle;
    display: inline-block; 
}

div p {
    margin: 0;        
    vertical-align: middle;
    display: inline-block; 
}

更有趣的是，如果您在两个单独的行上分隔结束范围标记（</span>）和打开段落标记（<p>），或者如果在两者之间添加空格，则技巧会中断

我的问题是 - 这个技巧如何运作？跨度如何帮助中心文本？为什么在关闭</span>代码和打开<p>代码之间在HTML中添加换行符/空格时会中断？

我创造了一个小提琴来演示这两点：https://jsfiddle.net/axRxE/385/

Answer 1

  

我的问题是 - 这个技巧如何运作？跨度如何帮助中心文本？

由于您提供了范围inline-block属性，因此继承它的父级高度（带height: 100%） - 在您的示例中为固定的300px < / strong>即可。由于您还为段落提供了相同的属性，因此这两个元素是彼此相邻的。查看示例：

#parent {
  height: 300px;
}
span {
  height: 100%;
  display: inline-block;

  /* some width and background-color for demonstration */
  width: 5px;
  background-color: red;
}
p {
  margin: 0;
  display: inline-block;
}

<div id="parent">
  <span></span>
  <p>foobar</p>
</div>

你还将vertical-align: middle（适用于inline-block）放在两个上，这使它们对齐（你只需要将该属性添加到较大的 >）：

#parent {
  height: 300px;
}
span {
  height: 100%;
  display: inline-block;

  /* some width and background-color for demonstration */
  width: 5px;
  background-color: red;

  /* added vertical-align */
  vertical-align: middle;
}
p {
  margin: 0;
  display: inline-block;
}

<div id="parent">
  <span></span>
  <p>foobar</p>
</div>

  

为什么在关闭</span>代码和打开<p>代码之间在HTML中添加换行符/空白时，它会中断？

这很简单 - 当您使用inline-block时，总是a whitespace issue between them。而且由于你没有为段添加一些宽度，它需要它可以采用的所有width，以及来自空白的额外宽度，段落 span。

在您的示例中，您的父级有120px width， span 使用0px，因此段获取所有父级宽度，即120px。现在，使用额外的空格（约为4px），由于段使用了所有宽度，因此空格不适合所以段落“断开” - 它低于跨度。

同时检查：

• inline-block element with no text renders differently
• Vertical-Align: All You Need To Know。