jquery fancybox content not centering in Chrome

问题

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.

Is it part of #fancybox-wrap?

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

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

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;
}

The html I am using is:

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

回答1:

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/

Relevant code:

$("#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'
});

回答2:

For anyone using a fancybox with a div container instead of a link to another page, what worked for me was to add the text-align: center style to the container. This centered the contents of the fancybox.

<a href="#container" id="lightbox-link">Show Lightbox Now</a>
<div id="container" style="display:none; text-align:center;">
<!-- HTML content here -->
</div>

And the JS to start it up.

$("#lightbox-link").fancybox({
    'onStart': function() {$("#container").css("display","block");},            
    'onClosed': function() {$("#container").css("display","none"); },
});

回答3:

My issue was resolved by replacing the file fancybox.css with jquery.fancybox.min.css Hope it helps someone

来源：https://stackoverflow.com/questions/21199737/jquery-fancybox-content-not-centering-in-chrome

标签

jquery

google-chrome

fancybox