jquery - 如何在使用 left 属性调整大小后使花式框居中

Question

我在花式框内容中有以下代码。我有一个链接，它将调用另一个花哨的框 iframe。第二个页面的宽度和高度将与第一个 iframe 页面不同。所以我在第二页中使用以下代码重新调整花式框 iframe 的大小，

   jQuery(function(){
                        //jQuery('div[id^=fancybox]').remove();
                        jQuery('#fancybox-frame', window.parent.document).load(function() { 
                            parent_fb_resize(560,444);            
                            jQuery('#fancybox-wrap').css('margin','auto');                    
                        });                            
});

使用以下代码调整 iframe 的大小，

function parent_fb_resize(w, h) {  
  if (w > 0 || h > 0) {

    if (w > 0) jQuery('div#fancybox-wrap', window.parent.document).css({ width: (w)+"px"});
    if (h > 0) jQuery('div#fancybox-wrap', window.parent.document).css({ height: (h)+"px"});
    if (w > 0) jQuery('#fancybox-content', window.parent.document).css({ width: w+"px"});
    if (h > 0) jQuery('#fancybox-content', window.parent.document).css({ height: h+"px"});
    jQuery.fancybox.resize();
    jQuery.fancybox.center();

  }
}
function fb_close_any() {
  window.top.eval('jQuery.fancybox.close()');
}

function fb_resize_any(w, h) {
  w = (w > 0) ? w : 0;
  h = (h > 0) ? h : 0;
  window.top.eval('fb_resize('+w+','+h+')');
}

到目前为止一切顺利。此代码调整第二页的大小。但是由于 id fancybox-wrap

中的 left 属性，重新调整大小的花式框不在中心位置

{
display: block;
height: 444px;
left: 271px;
margin: 0 auto;
top: 20px;
width: 560px;
}

这里我需要找到页面的中心，并且需要在 jQuery('#fancybox-frame', window.parent.document).load() 中动态应用左侧位置。请就此提出建议？

Answer 1

为什么 left: 271px; 甚至在 css 中？它不需要将元素居中，这就是 margin: 0 auto; 所做的。我建议您摆脱它，因为这可能是您的问题。

这是一个 Jsfiddle 来演示我的意思

http://jsfiddle.net/fPqqT/

如果你不能摆脱左边的 css，也许在调整大小时将它设置为 0px？

$("#fancybox-wrap").css("left", 0);