div內的垂直對齊div不起作用

Question

div的內部#inner為何不垂直對齊？ 請注意，如果使用的話，我使用的是IE 8和CSS，而不是CSS3。 這是我的html。

<div class="Content">

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

</div>

這是我的CSS

    #inner div {
         display: inline;
    }

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

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

如您所見，我嘗試進行顯示：table-cell; 然后進行垂直對齊：居中，但這沒有用。 知道為什么嗎？ 是的，我需要將“ #inner div”顯示為內聯。 我希望在#inner內部的div內聯並位於Content的中心。

Answer 1

您使用的display屬性不好。 使用此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;
}

您可以使用IE8 http://jsfiddle.net/rd2Hc/18/embedded/result/中的示例查看此鏈接。