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

【问题标题】：Does vertical align CSS property ever work?垂直对齐 CSS 属性是否有效？
【发布时间】：2016-08-10 19:25:23
【问题描述】：

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>

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

【问题讨论】：

它只影响文本等内联项目的对齐方式。你想要弹性。
我在这两个地方都使用了该属性，但其中一个都不起作用
并且内联项与行高垂直对齐。因此，将line-height: 200px 添加到您的 div 中，您就会看到。
不要相信 w3schools。 vertical-align 不会那样做。
@Rasik - 网上有一篇非常好的文章正确解释了垂直对齐属性。我强烈推荐你阅读christopheraue.net/2014/03/05/vertical-align

标签： html css vertical-alignment

【解决方案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

【讨论】：

【解决方案2】：

您发布的代码存在一些问题。

首先，你没有真正解释你想要的结果是什么，所以很难帮助你解决你的具体问题。

假设您要将段落文本与 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

【讨论】：

【解决方案3】：

在css中添加divdisplay: table-cell;

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

【讨论】：

是 "display:table-cell;"有效的 CSS？
@Sparky256 它是但应该有一个显示为表格的父级，在这种情况下没有。看看我的回答，你会看到它的作用
@dippas。我现在看到了。几乎有一个大脑f *艺术。感谢您的澄清。

【解决方案4】：

尝试在样式中使用line-height，如下所示，或者摆弄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>

【讨论】：

哎呀，这是个好问题，我只为单行做了，让我整理一下。
在这种情况下，您需要使用 css 代码作为 jsfiddle.net/zeasts/f9ag6t5m/2
@Riot 和我发布的答案一模一样

【解决方案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>

【讨论】：