contenu de jquery fancybox non centré sur Chrome

C’est un problème de CSS, je suppose, mais rien de ce que je fais ne force Chrome à placer le contenu de la boîte fantaisie au centre. Pas le centre de l’écran. le centre de la zone d’affichage.

Cela fait-il partie de # fancybox-wrap?

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

J’ai essayé un million de choses, mais seul Chrome ne peut pas pousser le contenu (une image) vers le bas et vers la droite.

OK – voici un peu plus de css qui pourrait être pertinent:

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

Le html que j’utilise est:

 

Basculez votre option de type boîte fantaisie en image et vous devriez aller bien. Voici une mise à jour de JSFiddle avec le correctif qui s’annonce bien dans Chrome: http://jsfiddle.net/PY2dU/5/

Code pertinent:

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

Pour ceux qui utilisent une fancybox avec un conteneur div au lieu d’un lien vers une autre page, ce qui a fonctionné pour moi a été d’append le style text-align: center au conteneur. Cela a centré le contenu de la fancybox.

 Show Lightbox Now  

Et le JS pour le démarrer.

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