0

div の内側 #inner が垂直方向に整列していないのはなぜですか? CSS3 ではなく、IE 8 と CSS を使用していることに注意してください。これは私の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 をインラインにして Content の中心に配置したいと考えています。

4

1 に答える 1

0

あなたは悪い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/の例で確認できます。

于 2013-10-22T20:54:35.270 に答える