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

Question

为什么 #inner 中的 div 没有垂直对齐？请注意，我使用的是 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;
    }

如您所见，我尝试制作 display: table-cell;然后做 vertical-align: middle 但它没有用。知道为什么吗？是的，我需要内嵌“#inner div”显示。我希望 #inner 内的 div 内联并位于内容的中心。

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/