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

垂直对齐工作不起作用，因为vertical-align属性仅适用于内联和表格单元格元素。（See the spec for details。）

您可以将包含块（#contactus）底部的body 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的更多信息，请访问：

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

Answer 2

如果您只需要＆＃34;联系我们＆＃34;文本垂直对齐，您可以将#contactUs line-height设置为500px。

line-height:500px;

垂直对齐无法处理div

2 个答案: