Question

所以我有这个div，它包含一个表单，其中包含验证消息淡入淡出和更改div的宽度和高度。我有一些jQuery来居中div但我遇到的问题是当验证消息淡入并调整div时jQuery没有响应。

我需要一些代码才能听取宽度＆amp; div的高度？

我目前的代码

resizeElement = '.blurHolder';

var holderHeight = jQuery(resizeElement).outerHeight();
var holderWidth = jQuery(resizeElement).outerWidth();

jQuery(resizeElement).css({
    'margin-top': - holderHeight / 2,
    'margin-left': - holderWidth / 2
});

任何帮助？

Answer 1

更改位置代码，使其成为'margin-top' : (holderHeight/2) - (divHeight/2)

并将其应用于剩余边距。也是什么位置设置，绝对或相对

Answer 2

试试这个：

HTML

<div class="container">
 <div class="blurHolder"></div>
</div>

CSS

.container{
    background: orange;
    width: 400px;
    height: 400px;
    float: left;
    margin: 10px;
}

.container .blurHolder{
    width: 100px;
    height: 100px;
    background: #333;
}

JS

$( document ).ready(function() {

    var containerHeight = $('.container').height();
    var containerWidth = $('.container').width();
    var offsetTop = (containerHeight - $('.container').find('.blurHolder').height())/2;
    var offsetLeft = (containerWidth - $('.container').find('.blurHolder').width())/2;

    $('.container').css({'padding-top': offsetTop, 'padding-left': offsetLeft, 'height': containerHeight - offsetTop, 'width': containerWidth - offsetLeft});

});

Answer 3

我刚刚用Google搜索library。

看起来您可以像onresize一样轻松地检测div事件：

new ResizeSensor($('#someDiv'), yourCallbackFunction);

顺便说一下。有一个原生onresize事件，但只有IE支持，因为您可以阅读here

使用jQuery集中灵活的div

3 个答案: