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-left: auto; 边距右：自动；我已经使用 jquery.position()

有人在这里看到任何明显错误的东西吗？谢谢你的帮助！

4

1 回答 1

0

来自Kunalbhat，谢谢！

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

使用两个单独的 div，一个用于叠加层，一个用于位于其顶部的图形。我使用 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 回答