div内的垂直对齐div不起作用

Question

How come the div's inside #inner are not vertically aligning? Do note that I am using IE 8 and CSS, not CSS3 if that makes a difference. This is my html.

<div class="Content">

    <div id="home">
        <div id="inner">
                <div id="stuff">HeadingOne</div>
                <div>HeadingTwo</div>
                <div>HeadingThree</div>
        </div>
    </div>

</div>

This is my CSS

    #inner div {
         display: inline;
    }

    #home #inner {
        margin: 0px auto;
        vertical-align: middle;
    }

    #home {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

As you can see, I tried making display: table-cell; and then doing vertical-align: middle but it didn't work. Any idea why? And yes, I need the '#inner div' displays to be inline. I want the there div's inside #inner to be inline and in the center of Content.

Answer 1

You are using bad the display property. Use this CSS:

#home {
    display: table;
    text-align:center;
}    
#home #inner {
    display:table-cell;
    height:50px;
    background-color:#ccc;
    vertical-align: middle;
}
#inner div {
    display: inline-block;
}

You can review this link with the example in IE8 http://jsfiddle.net/rd2Hc/18/embedded/result/