垂直对齐不适用于 div

Question

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

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

<div id = "contactUs"> Contact Us </div>

注：我不要绝对定位答案

Answer 1

如果您只需要 "Contact Us" 文本垂直对齐，您可以将 #contactUs line-height 设置为 500px。

line-height:500px;

Answer 2

垂直对齐无效，因为 vertical-align 属性仅适用于行内和 table-cell 元素。 (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; }

<div id = "contactUs"> Contact Us </div>

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

请注意，所有主要浏览器都支持 flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer。

垂直对齐不适用于 div

Vertical align not working on div

html

css

vertical-alignment

flexbox