2

次の html ドキュメントは、黄色の四角形の中に垂直方向に中央に配置された赤い四角形になると思います。

<html>
<body>

<div style="width:200px;height:200px;background-color:yellow">

    <div style="width:100px;height:100px;background-color:red;vertical-align:middle">

    </div>

</div>

</body>
</html>

ただし、親divの上部に配置されたものになります。

フィドル

私は何を間違っていますか？機能しないのはなぜvertical-align:middleですか?

4

2 に答える 2

2

vertical-align プロパティは、インライン レベル要素によって生成されるボックスの行ボックス内の垂直方向の配置に影響します。詳細はこちら！

于 2013-01-12T08:14:10.510 に答える
2 
<div style="display: table-cell; width:200px;height:200px;background-color:yellow; vertical-align:middle">
    <div style="width:100px;height:100px;background-color:red;">
    </div>
</div>

ここでjsFiddle

于 2013-01-12T08:15:15.563 に答える