Question

我的jQuery存在问题：我使用的脚本允许我通过给他们一个类来居中元素，但是这个脚本没有采用正确的高度。

这是我的HTML代码：

    <div class="logoutscreen blackbackground">
        <div class="window centered" style="display: block;">
       [CONTENT HERE]
       </div>
    </div>

这是我的jQuery代码：

$(function () {
    $(".centered").css({
        'position': 'absolute',
        'left': '50%',
        'top': '50%',
        'margin-left': -$(this).outerWidth() / 2,
        'margin-top': -$(this).outerHeight() / 2
    });
});

问题在于脚本没有使用.centered类（.window）获取div的高度和宽度，而是使用他的父级（.logoutscreen）。

为什么会这样？：（

Answer 1

使用$(this)是您的问题。与其他方法不同，您无法在jQuery的this方法中以$('.centered')身份访问.css()父对象...它将默认为全局window对象。< / p>

您要做的是缓存您的对象并明确引用它：

var $centered = $('.centered');

$centered.css({
    position:'absolute',
    left:'50%',
    top:'50%',
    marginLeft:((-1 * $centered.outerWidth()) / 2),
    marginTop:((-1 * $centered.outerHeight()) / 2)
});

这应该会给你你想要的东西。但是，如果您有多个实例，则需要执行以下操作：

$centered.each(function(){
    var $self = $(this);

    $self.css({
        position:'absolute',
        left:'50%',
        top:'50%',
        marginLeft:((-1 * $self.outerWidth()) / 2),
        marginTop:((-1 * $self.outerHeight()) / 2)
    });
});

这样就可以尊重每个唯一的height和width。

Answer 2

this不是$('.centered')。

使用：

$(function () {
    var centered = $('.centered').first();
    centered.css({
        'position': 'absolute',
        'left': '50%',
        'top': '50%',
        'margin-left': -centered.outerWidth() / 2,
        'margin-top': -centered.outerHeight() / 2
    });
});

jQuery没有采用正确的div高度

2 个答案: