jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 为什么我的div不能正确居中?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用带有jQuery的$.blockUI来显示模态对话. 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之上呈现页面中心.

但是,如果我在.mp_modalpopup CSS类中设置display:none,然后使用$.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'} 
});

为什么会这样?

解决方法

这种情况正在发生,因为blockUI也试图将您的< div>居中.如果你从CSS中删除所有定位,它应该工作.

删除这个:

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

还有这个

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

或者,您可以像这样禁用blockUI居中:

$.blockUI({ 
    centerX: false,centerY: false,message: $('#progressDialogue'),color: '#100'} 
});

大佬总结

以上是大佬教程为你收集整理的jquery – 为什么我的div不能正确居中?全部内容,希望文章能够帮你解决jquery – 为什么我的div不能正确居中?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。