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

Answer 2

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

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

Answer 3

尝试在样式中使用*11110 x 5 =... in block array... 11058 x 5 =... in another block array.*，如下所示，或者摆弄link

line-height

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

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属性是否有效？

5 个答案: