html - 为什么这个技巧在动态高度 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> 之间在 HTML 中添加换行符/空格时它会中断？标签和开口 <p>标签？

我创建了一个 fiddle 来证明这两点:https://jsfiddle.net/axRxE/385/

Answer 1

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

既然你给了跨度 inline-block 属性，然后跨度继承它的父高度(使用 height: 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 (与 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>

---

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

这很简单 - 当您使用 inline-block 时总有 a whitespace issue between them .由于您没有为 paragraph 添加一些宽度，它占用了所有 width它可以占用，并且由于空白的额外宽度，段落 低于 span .

在您的示例中，您的 parent 有 120px width ，span 使用 0px，因此 paragraph 占用所有父级宽度，即 120px。现在，有了额外的空白(大约 4 像素)，因为她的 paragraph 使用了所有宽度，空白不适合所以段落“中断” - 它低于跨度。

---

同时检查:

• inline-block element with no text renders differently
• Vertical-Align: All You Need ToKnow .