6

何度も聞かれる質問のように見えますが、その特定の状況に対する解決策を見つけることができませんでした。

これが私のレイアウトの基本的なワイヤーフレームです：

ここに画像の説明を入力してください

基本的に、ブラウザウィンドウの幅が100％、高さが100％の、背景が異なるdivがいくつかあります。それらのすべての中には、親の50％の幅を取りますが、その内容に応じて高さが可変である別のdivがあります。

これらすべてのdiv-within-a-divを垂直方向に揃えたいと思います。これで、親にdisplay：table-cellとvertical-align：middleを配置すると機能するはずだと読みましたが、この場合は混乱しているように見えます。：-/

私のコード：

<head>
<style>
     html, body {
            height: 100%;
        }
        body > div {
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        .centered {
            width: 50%;
            margin: 0 auto;
            background: rgba(0,0,0,0.4);
            padding: 50px 0 30px 0;
        }
</style>
</head>
        <body>

            <div id="pic_1">
                    <div class="centered">content</div>
            </div>

            <div id="pic_2">
                    <div class="centered">content</div>
            </div>

            <div id="pic_3">
                    <div class="centered">content</div> 
            </div>  

        </body>

ご協力いただきありがとうございます！

4

1 に答える 1

2

祖父母要素を に設定しdisplay:table; height:100%、親要素を に設定しますdisplay:table-cell; vertical-align:middle。

例については、こちらの「方法 1」を参照してください。

また、マークアップで;を使用しないでください。class="centered"代わりにセマンティック クラス名を使用してください。

于 2013-01-01T20:02:53.120 に答える