垂直对齐 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 仅适用于行内级别和 table-cell 元素。 div 和 p 都是块级元素。

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 or W3C Specs

Answer 2

添加到 div 中 css display: table-cell ;

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

Answer 3

尝试在样式中使用line-height，如下所示，或fiddle link

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

}

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

Answer 4

您发布的代码有几个问题。

首先，您还没有真正解释您想要的结果是什么，因此很难帮助您解决您的具体问题。

假设您要将段落文本与 div 中的其他文本对齐，您必须将 display:inline-block; 添加到您的段落中。然后，垂直对齐的技巧是使用 line-height 以及 height。将它们设置为相同，瞧，一切都很好。

div{
  height: 200px;
  width: 500px;
   line-height:200px;
  background: red;
  text-align:center;
  vertical-align: middle;
}
p{
  display:inline-block;
  padding:0;
  margin:0;
}

codepen here

Answer 5

如果你想使用 FlexBox 你可以这样做。

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

这使得事物在两个方面都居中。如果您只希望它是高度，请删除 justify-content。请注意，您需要在此示例中执行 flex-direction: column 以使内容沿着页面向下移动而不是并排放置。

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

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

垂直对齐 CSS 属性有用吗？

Does vertical align CSS property ever work?

html

css

vertical-alignment

垂直对齐 CSS 属性 有用吗？

Does vertical align CSS property ever work?

html

css

vertical-alignment

垂直对齐 CSS 属性有用吗？