爲什麼我的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'} 
});

這究竟是爲什麼？

來源

2010-03-25 Kev

發生這種情況是因爲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'} 
});

來源

2010-03-25 18:57:30

感謝您的回答，可悲的是，這是行不通的。 – 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', 
    } 
});

來源

2011-04-30 22:50:33 BoulderDave

爲什麼我的div不能正確居中？

回答

相關問題