1

別の div( )cen内にあるdiv( ) を中央揃えにしたいimp

これがコード例です

.imp
{
        width:100%;
        height:100%;
        background-color: black;
        position: fixed;
        top:0;
        bottom:0;
}

上がメインの div で、中央にあるはずの div が下に表示されます

    .cen
   {
    margin-left:auto;
    margin-right:auto;
    padding:5px;
    width:auto;
    height:auto;

   }

これが私の質問.cenです。ブラウザの中央に合わせる方法は? margin-left:auto; を持つ マージン右:自動; 中央に表示されますが、上からではありません。上に 50% を指定し、50% を残しました。また、内部のコンテンツが.cen大きくなり、ウィンドウの右下に表示されるため、中央に揃えることができません。手がかりやアイデアはありますか？

4

2 に答える 2

2

これはレスポンシブである必要があるため、Javascript を使用してのみ実現できます。

var cen = document.getElementsByClassName('cen')[0];
var imp = document.getElementsByClassName('imp')[0];
cen.style.marginTop = ((imp.offsetHeight / 2) - (cen.offsetHeight / 2)) + "px";

resizeとloadイベントの両方で上記の関数を呼び出します。

働くフィドル

また、Calc CSS3 プロパティを確認してください。子要素の高さを知っていると役立ちます。

于 2013-07-04T06:24:47.540 に答える