0

ボックス div が垂直方向に整列しない理由を教えてください。私もテーブルを使ってみましたが、どちらも整列しません。ありがとう！

<html>
<head>
    <style>

    #box{
        width:400px;
        height:400px;
        background-color:black;
        }

    #tb{
        display:table;
        width:100%; 
    }

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

    </style>
    </head>

    <body>
        <div id="tb">
            <div id="td">
                <div id="box"></div>
            </div>
        </div>
    </body>
    </html>
4

2 に答える 2

0

CSS:

  #box {
       width:400px;
       height:400px;
       background-color:black;
       display: table-cell;
       vertical-align: middle;
       text-align: center;
   }

フィドル: http://jsfiddle.net/9uGAU/

于 2013-08-24T09:08:28.203 に答える
0

これを試してみてください

HTML

<div id="tb">
    <div id="td">
        <div id="box"></div>
    </div>
</div>

CSS

html, body {
    height:100%;
}
#box {
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background-color: #000;
    margin: 0 auto;

}
#tb{
    display: table;
    height: 100%;
    width: 100%;
    background: #999;
    text-align: center;
}
#td {
    display: table-cell;
    width: 100%;
    height: 100%;
    background: #999;
    text-align: center;
    vertical-align: middle;
}

ライブデモ

于 2013-08-24T09:18:34.870 に答える