2

サイズが動的に変化するdivを正確に中央に配置したい。

<div id="containall">
  <div style="display:none" align="center" id="mainDiv">
    <div class="mainDiv" id="paste"></div>
    <div class="midDiv" id="popup"><a href="#" onClick="hideDiv();" style="font-size:20px;float:right;margin:5px 5px 0 0px;padding:5px 0px 5px 9px;background:#000;-webkit-border-radius: 16px;-moz-border-radius:16px;border-radius:16px;padding-right:10px;text-decoration:none">X</a>
        <img id="bearimage2" style="visibility:hidden;">
        <canvas id="tools_sketch" width="200" height="200"></canvas>
    </div>
 </div>
</div>

キャンバスが保持するイメージに応じて、キャンバスのサイズを動的に変更しています。POPUP divのcssは次のようになります

#popup {
    width:600px;
    height:400px;
    background:url(/BugClipper/bccss/bgtrans_bc.png);
    position:absolute;
    left:400px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    margin:-600px 0 0 0;
    border:2px solid #333;
}

キャンバスを保持するようにポップアップのサイズが変更されると、画面の右側に移動し、スクロールしてキャンバスに画像全体を表示する必要があります。

常に画面中央に表示されるようにcssを設定する方法を教えてください

4

3 に答える 3

1

この CSS をポップアップ div に適用できます。

#popup {
    width: 50%;
    margin: 0 auto;
}
于 2013-04-17T05:17:15.107 に答える
1

これを試して：

#popup {
 top: 50%;
 left: 50%;
 width: 600px;
 height: 400px;
 margin: -200px 0 0 -300px;
 position: fixed;
}

フィドル

于 2013-04-17T06:52:58.580 に答える