html – 为什么这个技巧在动态高度div中垂直居中(以及为什么它会中断)？

我发现这个 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>之间的HTML中添加换行/空格时会中断？标记和打开< p>标签？

我创造了一个小提琴,以证明这两点：https://jsfiddle.net/axRxE/385/

解决方法

My question is – how does this trick work? How is span helping center the text?

由于您给出了span inline-block属性,因此span将继承它的父高(高度：100％) – 在您的示例中,它是固定的300px.既然你给段落赋予了相同的属性,那么这两个元素是彼此相邻的.看一个例子：

#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(与内联块一起使用)放在它们上面,这使它们对齐(你只需要将该属性添加到较大的属性)：

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

And why does it break when a newline/whitespace is added in HTML between closing </span> tag and opening <p> tag?

这很简单 – 当你使用内联块时总是有a whitespace issue between them.而且由于你没有为段落添加一些宽度,它需要占用所有宽度,并且从空白处获得额外的宽度,段落低于跨度.

在您的示例中,您的父级具有120px宽度,跨度使用0px,因此该段落采用所有父级宽度,即120px.现在,使用额外的空格(约为4px),因为她的段落使用了所有宽度,所以空格不适合所以段落“中断” – 它低于跨度.

还检查：

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