jQuery fancybox内容不在Chrome中居中 [英] jquery fancybox content not centering in Chrome

问题描述

我认为这是一个CSS问题，但我所做的一切都没有使Chrome将fancybox的内容放在中间.不在屏幕中央；显示框的中心.

It's a css problem I figure, but nothing I do makes Chrome place the contents of the fancybox sit right in the centre. Not the centre of the screen; the centre of the display box.

这是#fancybox-wrap的一部分吗?

Is it part of #fancybox-wrap?

#fancybox-wrap {
position: absolute;
margin: 20 0 0 20;
padding: 20px;
z-index: 1101;
outline: none;
display: none;
}    

我已经尝试了上百万种方法，但是只有Chrome不会将内容(图像)向下和向右推.

I've tried a million things but only Chrome won't push the contents (an image) down and to the right.

确定-这里可能还有其他一些相关的CSS:

OK - here's a bit more of the css that might be relevant:

#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1100;
display: none;
}

#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}

#fancybox-wrap {
position: absolute;
    margin: 20 0 0 20;
padding: 20px;
z-index: 1101;
outline: none;
display: none;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #000;
}

#fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 1102;
border: 0px solid #000;
}

我正在使用的html是:

The html I am using is:

<div class="fancybox-wrap">
<a id="special" href="http://domain.com.au/images/coupons.png"></a>
</div>

推荐答案

将您的精美框type选项切换为image，您应该可以.这是一个JSFiddle更新，其中的修复在Chrome中看起来不错: http://jsfiddle.net/PY2dU/5/

Switch your fancy-box type option to image and you should be fine. Here is a JSFiddle update with the fix that looks good in Chrome: http://jsfiddle.net/PY2dU/5/

相关代码:

$("#special").fancybox({
        'title'             : 'SPECIAL OFFERS',         
        'width'             : 630,
        'height'            : 465,
        'autoScale'         : true,
        'autoDimensions'    : true,
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'speedIn'           : 200, 
        'speedOut'          : 200,
        'overlayShow'       : true,
        'centerOnScroll'    : true,
        'easingIn'          : 'easeOutBack',
        'easingOut'         : 'easeInBack',
        'type'              : 'image'
});

这篇关于jQuery fancybox内容不在Chrome中居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！