Vertical align not working on div

问题:

I'm trying to vertical align a div but it's not working at all for some reason. What am I doing wrong?

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

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

Note: I do not want absolute positioning answers.

回答1:

The vertical alignment effort didn't work because the vertical-align property applies only to inline and table-cell elements. (See the spec for details.)

You can align the #contactus div at the bottom of the containing block (body) with 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>

To learn more about flexbox visit:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube video tutorial

---

Note that flexbox is supported by all major browsers, 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.

回答2:

If you only need the "Contact Us" text vertically aligned you can set #contactUs line-height to 500px.

line-height:500px;