Question

我需要水平和垂直地将div放在另一个div中。所以我目前正在使用以下jQuery代码：

function centerCaptions() {
  $('.caption').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.caption').outerWidth())/2,
   top: ($('.page-title').height() 
     - $('.caption').outerHeight())/2
  });
}      
$(document).ready(function () {
    centerCaptions();
    $(window).resize(centerCaptions);
    $(window).load(centerCaptions);
});

其中 .caption 是要居中的元素， .page title 是容器。上面的代码运行得很完美，但我想知道为什么如果我删除$(window).load(centerCaptions);我将元素垂直但不是水平居中。我希望恰恰相反。我哪里错了？

Answer 1

.resize()是一个事件处理程序，但.load()也可以是一个函数调用。关于.load()的文档确切地说明所给出的参数将决定必须调用.load()。加载功能或加载的事件已完成。对于第一种情况，第一个参数必须是url，对于第二个，它必须是eventHandler。当你传递一个函数时，我认为jQuery必须丢失，并在你的控制台中抛出异常，因此，根本不执行任何jquery。由于你的元素必须由它们自己的css垂直居中，这就是你得到这个结果的原因。删除此处无用的$(window).load(centerCaptions);，或使用正确的参数进行编辑。

你可以做的是

$(window).load(function() {centerCaptions(); } );

您将获得所需的结果。

文档准备就绪时，div内部绝对居中

1 个答案: