What are the conditions for vertical-align property of CSS to work?

Question

I only found this page, explaining vertical-align property of CSS, but it does not work according to this fiddle:

http://jsfiddle.net/C8ejb/

important part of the CSS: (is required to post the question)

header
{
    display:inline-block;
    height:20%;
    width:100%;
    background:rgba(0,0,0,0.9);
    color:#ccc;
}
    header .header_content
    {       
        display:inline-block;
        background:rgba(255,255,255,0.4);
        vertical-align:middle;  
    }

So, can we build a list of conditions where we can actually use vertical-align property, that could save a lot of "why my vertical-align rule is not working?" questions, I guess.

Thanks for any help !

Answer 1

Here is the Demo

CSS:

header {
    display: table;   /* Change this */

    height:20%;
    width:100%;
    background:rgba(0,0,0,0.9);
    color:#ccc;      
}

.header_content {       
    display:inline-block;
    background:rgba(255,255,255,0.4);

    display: table-cell;   /* Change this */

    vertical-align: middle;
}

You can read here for more information.

Answer 2

Vertical align only affects multiple inline-block elements in relation to each other. If you had two .header_content elements with different heights, you would see them vertically aligned to the middle.

http://jsfiddle.net/C8ejb/5/