14

私のコードはいつ機能していましたか

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>

しかし、display:table-cell; を追加しても機能しません。vertical-align を使用するための div へ

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>

body の空白全体を div でカバーしたい

4

3 に答える 3

18

これでコードが機能するはずです。

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

例

経験則display : table-cell：懸念される場合は常に適切なマークアップを使用してください。

于 2012-06-06T08:36:42.610 に答える