0

さて、この質問は何度も尋ねられ、答えられましたが、それでも私は実用的な解決策を生み出すことができません。

DIVの中央の任意の要素に垂直に配置したいと思います。したがって、上記の質問のリンク先チュートリアルは次のように述べています。

Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.

コードでのこの例：

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>


チュートリアルのスクリーンショットが示すものとは反対に、これは機能しません。私が変更した唯一のことは、外側のDIVの周りに境界線を追加することでした。これにより、垂直方向の配置を確認できます。

これは、直線のようにレンダリングされる高さゼロのDIVを生成するだけです。外側のDIVに高さを追加すると、内側のコンテンツを表示できますが、実際にはコンテンツが垂直方向に整列しません。では、なぜこの例が機能しないのでしょうか。

4

2 に答える 2

0

このChris Coyer の記事に基づく別のアプローチを次に示します。テキストを固定サイズの div に垂直方向に中央揃えする場合は、そのようにプロセスを繰り返すだけです。右揃えにしたい場合は、「text-align: center;」を変更してください。myoutercontainer のスタイル。

于 2012-09-11T18:45:34.213 に答える
0

含まれている div にも高さが指定されている必要があると思います。#myoutercontainer div を firebug で検査すると、実際には高さが 13em であることがわかりますが、これはサンプル コードには示されていません。

于 2012-09-11T18:40:50.930 に答える