代码之家 › 专栏 › 技术社区 › erlando

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

blockui css jquery

erlando · 技术社区 · 14 年前

我使用$.blockui和jquery来显示一个模式对话。HTML看起来像:

<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之上。

但是如果我设定 display:none 在 .mp_modalpopup css类,然后使用$.blockui使其可见,在ie 8中,对话框垂直居中,但与页面上一半的对话框左对齐;在google chrome和firefox中,对话框根本不可见(但blockui工作,因为页面变灰)。

这是blockui javascript:

$.blockUI.defaults.css = {};

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

为什么会这样?

2 回复 | 直到 13 年前

Nick Craver 14 年前

这是因为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'} 
});

BoulderDave 13 年前

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

如果阻止某个元素而不是整个页面,blockui将提供使用centerx和centery的选项。

我屏蔽了html元素,就这样。我的div水平和垂直居中。当然,我不希望它垂直居中,所以我将centery设置为false,并在css中将其设置为top:“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',
    } 
});