Question

我正在尝试将动态调整大小的.nav置于静态.container div中。我有以下代码：

 $('.nav').css({
     'position': 'fixed',
         'left': '50%',
         'top': '50%',
         'margin-left': -$(this).outerWidth() / 2,
         'margin-top': -$(this).outerHeight() / 2
 });

有人可以解释为什么.nav不在其父元素中居中吗？

Answer 1

主要问题是this没有提及您的想法。当执行到达以下行时，您仍处于相同的范围内：

'margin-left': -$(this).outerWidth() / 2,
'margin-top': -$(this).outerHeight() / 2

所以this仍然指的是.css来电之前所做的事情。在大多数情况下，当你在jQuery函数或事件的回调中时，this只会改变（在jQuery的手中）。

在修复之后，它有点有用：http://jsfiddle.net/8jfkv/11/，但是你的计算还是有些不合适。

Answer 2

2个问题：

正如克里斯指出的那样，$(this)不是.nav。在您的示例中，$(this)是JSFiddle的结果iframe，因此您在错误的元素上调用outerWidth/Height。

我建议将.nav捕获为局部变量（以最小化jQuery选择）。
由于.nav最初为position: static，因此其初始宽度为其容器的100％。所以（假设你已经修复了＃1）你的小提琴中的outerWidth()将返回500px，这将导致左边距为-250px。

.nav的{{1}}需要先设置，然后调用position，使其宽度先崩溃。（并且其outerWidth()需要设置为position而不是absolute。）

这个小提琴中修复了两个问题：http://jsfiddle.net/8jfkv/13/

jQuery动态居中不按预期工作

2 个答案: