0

穴の画面でポップアップ div を中央に配置する方法についていくつかの解決策を見つけましたが、親 div 内で (垂直方向と水平方向にも) 中央に配置する必要があります。ポップアップのサイズは固定ではなく、親 div のサイズに相対的です。私はこれについて何も見つけておらず、自分でそれを行うことができませんでした. ですので、何かアイデアがありましたらお願いします。

ここに私のコードがあります: http://jsfiddle.net/crXCz/

<div id="container" style="width: something; height: something;> some text <br> some text     
<div class="popup"></div>
</div>


div.popup {
    height: 95%;
    width: 95%;
    border-color: #d3d7cf;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    background-color: #f3f3f3;
    z-index: 1;
}
4

2 に答える 2

0

私があなたを正しく理解していれば、あなたの要素は両方とも高さが動的です。私が通常行うことは、JavaScriptを少し追加することです。（jQueryを想定）

function verticalAlign(el) {
    // Calculate marginTop by taking parents height minus element height
    // and divide the value by two
    var marginTop = (el.parent().height() - el.height()) / 2;

    // Apply the top margin to the element
    el.css('margin-top', marginTop);
}

verticalAlign($('.verticalAlign'));
于 2012-12-23T19:02:18.227 に答える
0

ドキュメント コードを理解する必要があります。しかし、私の理解によれば、div要素を中央に配置したいと考えています。div 要素の位置を相対位置に、メイン コンテナーの位置を絶対位置に設定し、次のCSSコードをポップアップ ボックスに追加します。

.popup{
position:absolute;
top:50%;
height: <your value in percentage>;
margin-top: (negative value of your height, divided by 2);
width:<your value in percentage>;
left:50%;
margin-left: (negative value of your width, divided by 2);
}
于 2012-12-23T18:57:10.447 に答える