0

CSS を使用して物事をセンタリングすることが何度も求められていることは知っていますが、これらを見てきましたが、何をしても div をきれいにセンタリングできないようです。

私のdivは十分に単純です

<div id="overlay">
   <img src="~/Content/images/loading.gif" id="img-load" />
</div>

この下にいくつかの情報を含む表があります。ええ、私はテーブルが配置などのためではないことを知っています.私は知っています. 

<table id="uploadTable" style="width:100%;">
<tr valign="top">
    <td width="100%">
        something in here
    </td>
</tr>
<tr>
    <td>
        something in here
    </td>    
</tr>

このテーブル宣言の後、オーバーレイの幅と配置を実際に決定する jQuery があります。正常に動作しますが、常に完全に機能するとは限りません。また、モバイル Android デバイス (常に div が存在する場所の左マージン) では機能しません。

<script>           
    $table = $("#uploadTable");                

    $("#overlay").css({
        opacity: 0.9       
        // current 'busy' logo has width of 200, so need to offset width by half that.
        ,left:  (($table.outerWidth()- 100)/2)
        });
</script>

オーバーレイの CSS は次のとおりです。

#overlay { 
display:none;     
position:absolute; 
background:#fff; 
z-index: 10;  }

したがって、("#overlay").css コードに示されているように、これを (ほとんどの場合) 中央に配置する唯一の方法は、数学を使用することです。

私が試したすべてのことは、私が試した親の場所の左端に常にグラフィックを配置します。margin-right:auto; 私は jquery.position() を試しました

ここで明らかに間違っていることを見た人はいますか？ご協力いただきありがとうございます！

4

1 に答える 1

0

クナルバットから、ありがとう！

http://codepen.io/kunalbhat/full/BuDLo

2 つの別個の div を使用します。1 つはオーバーレイ用で、もう 1 つはこの上に配置されるグラフィック用です。表示/非表示を切り替えるには、jQuery.fadeIn & fadeOut を使用しました。再度、感謝します！

これが私のCSSです： 

#modal-overlay {
  background: gray;
  opacity: .75;
  display:none;     
  bottom: 0;
  height: auto;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index:10;
}




#modal-box {
  display:none;     
  background: white;
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  z-index:15;
}
于 2013-10-10T15:32:38.523 に答える