Search code examples
htmlcssflexboxvertical-alignment

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.

Solution

  • 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:

    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.