html - 垂直对齐 CSS 属性是否有效？

Question

W3School 说:

When we use vertical-align:middle; The element is placed in the middle of the parent element

所以我尝试这样做，但没有得到想要的结果

代码:

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  vertical-align: middle;
}
p {
  vertical-align: middle;
}

<div>
  text
  <p>
    yo bro
  </p>
</div>

为什么我没有得到想要的结果？

Answer 1

因为 vertical-align 仅适用于内联级别和表格单元格元素。 div 和 p 都是 block 级元素。

Applies to inline-level and table-cell elements. It also applies to ::first-letter and ::first-line.

MDN Source

考虑到这一点并使用您的示例使您的 div 成为 table 并且您的 p 成为 table-cell

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  display: table
}
p {
  vertical-align: middle;
  display: table-cell;
}

<div>
  <p>
    yo bro
  </p>
</div>

注意:不要相信 W3Schools 作为来源，而是使用 MDN或 W3C Specs