0

以下の計算に基づいて幅とオフセットの高さを計算している div ブロックがあります。今、div ブロックの間にメッセージ ホルダー ブロックを配置しようとしています。

私の目的は、div「oID_1」の中央にメッセージ「ポップアップ」ブロックを表示することです。誰でも私を助けることができますか？

<BODY>
  <head>
  <script>
  function msgBox(message) {
    var msgbox = document.getElementById("msgbox");
    msgbox.innerHTML = message;
    var x = (window.innerWidth / 2) - (msgbox.offsetWidth / 2);
    var y = (window.offsetHeight / 2) - (msgbox.offsetHeight / 2);              
    msgbox.style.top = y;
    msgbox.style.left = x;
    msgbox.style.display = "block";
  }
</script>
<style type="text/css">
  .popup {
    width:100px;
    height:100px;
    position:absolute;
    display:none;
    border:1px solid green;
  }
</style>
<script type="text/javascript">
  function showPopup(id) {
    var popup = document.getElementById(id);
    var divblock=document.getElementById('oID_1');
    width=parseInt(oID_1.style.width);
    var x = (width / 2) - (popup.offsetWidth / 2);
    var y = (divblock.offsetHeight / 2) - (popup.offsetHeight / 2);              
    popup.style.top = y;
    popup.style.left = x;
    popup.style.display = "block";
  }
</script>
</head>
<DIV CLASS="body">
  <center>
  <div id="popup" class="popup">
    This a vertically and horizontally centered popup.
  </div>
  <a onclick="showPopup('popup');">Show Popup</a>
  <DIV ID="oID_1" STYLE=" width:300; height:300;border:1px solid red">
  </DIV>
  </center>
</DIV> 
</BODY>
4

3 に答える 3

1

要素が絶対位置にあり、幅がわかっている場合は、いつでも left: 50%; を使用できます。margin-left: -(半角)px

于 2012-07-26T09:13:53.627 に答える
0

jQueryは使えますか？center-div-with-jquery を見てください

于 2012-07-26T09:10:12.783 に答える
0

次の Web サイトをご覧ください: http://bushraaadit.appspot.com/

これで、div を中央に配置する方法は非常に簡単になりました。まず、HTML の構造を見てみましょう。

<div id="container">
    <div id="wrapper">
        <div id="center"></div>
    </div>
</div>

3 つのネストされた div があります。最初のdiv ( )containerは、3 番目の div ( ) を中央に配置する divcenterです。2 番目の div ( wrapper) は、中央に配置するために使用されます。水平方向と垂直方向の中央に配置されるセンター タグと考えてください。

container今度は CSS についてです (はい、CSS で純粋に機能し、 div のサイズが変更されると自動的に中央に再配置されます)。div にcontainer任意の幅と高さを指定します。次に、wrapperとcenterdiv です。

wrapperdivは、 divと同じ幅と高さを持つ必要がありcenterます。centerdiv に明示的な幅と高さ (コンテナーの 50% など) が必要な場合は、それを にwrapper設定し、幅と高さをcenter100% (コンテナーの 50% の 100%) に設定します。それ以外の場合は、wrapperフロートを左にします (そうすると、自動的にcenterdiv のサイズに縮小されます)。

最後にそれを中央に配置するために、最初に と の位置を相対に設定しwrapperますcenter。次に、wrapperdiv は、そこから右と下の 50% (コンテナーの 50%) に配置されます。次に、centerdiv は、現在の場所から左と上に 50% 配置されます (50% のwrapper50% は、それ自体の 50% です)。

結果の CSS は次のようになります。

html, body, #container {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
}

#container {
    background-color: #FFF0F5;
}

#wrapper {
    height: 50%;
    left: 50%;
    position: relative;
    top: 50%;
    width: 50%;
}

#center {
    background-color: #FFE4E1;
    bottom: 50%;
    height: 100%;
    position: relative;
    right: 50%;
    width: 100%;
}

最終結果は、このフィドルで確認できます: http://jsfiddle.net/a3kVj/

それが役立つことを願っています。

于 2012-07-26T10:02:32.923 に答える