垂直对齐不适用于div答案

【问题标题】：Vertical align not working on div垂直对齐不适用于div
【发布时间】：2016-04-28 13:05:18
【问题描述】：

我正在尝试垂直对齐 div，但由于某种原因它根本不起作用。我做错了什么？

body {
border: 1px solid red;
height: 500px;
}
#contactUs {
border: 1px solid blue;
vertical-align: bottom;
}

&lt;div id = "contactUs"&gt; Contact Us &lt;/div&gt;

注意：我不想要绝对定位答案。

【问题讨论】：

什么？它没有办法起作用。 #contactUs 不是内联元素，但它不在任何容器中，只是在 body 中。
@TheProHands body 不是容器吗？
@TheProHands 无论如何，这不是真的，因为我只是试图在这个 div 周围包裹一个外部 div，并在它上面尝试了相同的 css，但结果相同，所以它必须是别的东西。
@jessica Nah，我说的是真的，亲爱的。
@TheProHands 我已经通过提供一个不起作用的例子证明了我的观点。那你为什么不提供一个可行的例子来证明你是对的呢？

标签： html css flexbox vertical-alignment

【解决方案1】：

垂直对齐没有奏效，因为vertical-align 属性仅适用于内联和表格单元格元素。 (See the spec for details.)

您可以将包含块 (body) 底部的 #contactus div 与 flexbox 对齐。

body {

    display: flex;               /* convert element to flex container */
    flex-direction: column;      /* create a vertical alignment for child elements */
    justify-content: flex-end;   /* align child elements at the end of the container */

    border: 1px solid red;
    height: 500px;
}

#contactUs { border: 1px solid blue; }

&lt;div id = "contactUs"&gt; Contact Us &lt;/div&gt;

要了解有关 flexbox 的更多信息，请访问：

请注意，所有主流浏览器都支持 flexbox，except IE 8 & 9。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

【讨论】：

是的！ “新”终于出来了！因为大家都想要！伟大的！你能评论一下所有新的，以及它们的作用吗？
我刚刚发现了一个问题。我不想在最后对齐所有子元素。只有特定的子元素。在这种情况下，只有一个子元素，即#contactUs。
...还有这个问题吗？
正确。因为您的问题中只有一个子元素。发布另一个小提琴或问题，我会尽力解释。
没有办法只将一个元素垂直对齐到其父元素的底部？上面的例子中只有一个子元素，因为它只是一个例子，我尽量让我所有的例子尽可能简单，所以回答者不会抱怨代码太长。您不可能期望任何页面只有一个元素，页面底部的联系我们，对吧？当然还得有其他内容。

【解决方案2】：

如果您只需要垂直对齐的“联系我们”文本，您可以将#contactUs line-height 设置为 500 像素。

line-height:500px;

【讨论】：

您在帖子的哪个位置看到“居中对齐”字样？