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

Question

W3School说:

当我们使用时vertical-align:middle;元素被放置在父元素的中间

所以我试着这样做,但没有得到理想的结果

代码:

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是块级元素.

适用于 内联级和表格单元格.它也适用于 ::first-letter和::first-line.

MDN来源

考虑到这一点,并使用你的例子,让你的diva table和你的patable-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规范