为什么我的div不能正确居中？

问题描述：

我使用$ .blockUI与jQuery来显示模式对话。该HTML看起来像：为什么我的div不能正确居中？

<div id="progressDialogue" class="mp_modalpopup"> 
    <div class="mp_container"> 
     <div class="mp_header"> 
      <span id="pd_header_text" class="mp_msg">Please wait..</span> 
     </div> 
     <div class="mp_body"> 
      <img src="ajax-loader.gif" style="text-align:center" alt="loading" /> 
     </div> 
    </div> 
</div>

的CSS是这样的：

.mp_modalpopup 
{ 
    font-family: arial,helvetica,clean,sans-serif; 
    font-size: small; 
    padding: 2px 3px; 
    bottom: 50%; 
    right: 50%; 
    position: absolute; 
    width: 400px; 
    z-index:999;  
} 

.mp_container 
{ 
    width: 400px; 
    border: solid 1px #808080; 
    border-width: 1px 1px; 
    left: 50%; 
    position: relative; 
    top: 50%; 
} 

/* removed mp_header, mp_body, mp_msg CSS for brevity */

这会高兴地呈现在页面上其他HTML的顶部*嫌爆炸。

但是如果我在.mp_modalpopup CSS类设置display:none，然后使用$ .blockUI使其可见，在IE 8中的对话中心本身在垂直方向而留下关闭页面，并在谷歌Chrome和Firefox的对话的一半对齐该对话根本不可见（但blockUI正在工作，因为该页面变灰）。

这是blockUI的javascript：

$.blockUI.defaults.css = {}; 

$.blockUI({ 
    message: $('#progressDialogue'), 
    overlayCSS: { backgroundColor: '#000', opacity: 0.1 }, 
    css: {backgroundColor: '#00f', color: '#100'} 
});

这究竟是为什么？

答

发生这种情况是因为blockUI也试图集中您的<div>。如果你从CSS中删除所有的定位，它应该工作。

删除此：

bottom: 50%; 
right: 50%; 
position: absolute;

这

left: 50%; 
position: relative; 
top: 50%;

或者，您可以禁用blockUI中心这样的：

$.blockUI({ 
    centerX: false, 
    centerY: false, 
    message: $('#progressDialogue'), 
    overlayCSS: { backgroundColor: '#000', opacity: 0.1 }, 
    css: {backgroundColor: '#00f', color: '#100'} 
});

感谢您的回答，可悲的是，这是行不通的。 – Kev 2010-03-25 19:42:25

@Kev - 删除CSS并让它居中会发生什么？ – 2010-03-25 20:29:32

有一堆传统的HTML和CSS围绕我自己的代码（传统的ASP包括等）。问题进一步发生在树上，需要进行一些重大修改来解决这个问题。 – Kev 2010-04-14 19:42:40

答

其实我只是找到了一个非常简单的解决方案。

如果您阻止了一个元素而不是整个页面，blockUI为您提供了使用centerX和centerY的选项。

我*了元素html，就是这样。我的div是水平和垂直居中。当然，我不希望它垂直居中，所以我将centerY设置为false，并在CSS中将其设置为最高：'5％'，如下所示。还要确保你在blockUI CSS中设置元素的宽度。

$('html').block({ message: $('#layOver'), 
    centerX: true, 
    centerY: false, 
    css: { 
      top: '5%', 
      width: '720px', 
      height: 'auto', 
      cursor: 'null', 
      border: 'none', 
      textalign: 'center', 
      backgroundColor: 'auto', 
    }, 
    overlayCSS: { 
      opacity: 0.4 , 
      cursor: 'null', 
    } 
});

为什么我的div不能正确居中？

相关推荐