如何將我的fancybox始終放在窗口的中心

Question

我是一個老法國新手。我有一個關於Fancybox的問題。 我在JavaScript和編程方面的技能是新的。 因此，謝謝你的理解

我有許多拇指哪些數字來自一個文件夾。 每個拇指可以打開一個花哨的盒子來顯示伴隨圖片的幻燈片 我設法做我想要的，但出現了另一個問題， 總是有問題fancybox窗口中心在div而不是在窗口中。 thhumbs越多，div越大。 而花式箱子的開口越靠近底部，直到它從窗戶消失。

我用的是標準的fancybox 2.1.5 js和css

所以，謝謝你的幫助 ，並希望我的英語不夠

這裏明確的是JavaScript：

$(document).ready(function() { 
    $(".image-show").fancybox({ 
     padding   : 15, 
     fitToView : true, 
    }); 

    $('.open-album').click(function(e) { 
     var el, id = $(this).data('open-id'); 
     if(id){ 
      el = $('.image-show[rel=' + id + ']:eq(0)'); 
      e.preventDefault(); 
      el.click(); 
     } 
    });   
}); 

這裏是html：

<div class="boite_real"> 
    <div class="real"> <img src="<?php echo $image ; ?>" alt="vignette realisations" /> </div> 
    <div class="monbloc">          
     <div class="layout">         
      <div class="layout-wrapper">       
        <div class="layout-content">      
        <div class="texte"> 
         <a href="#" class="open-album" aria-haspopup="true" data-open-id="album-<?php echo $valeurBoucle; ?>"> 
          <h3><?php echo $titre; ?></h3> 
         </a> 
         <p><?php echo $texte; ?></p> 
        </div> 
        </div> 
      </div> 
     </div> 
    </div> 

    <!-- content of slideshow in display none--> 
    <div id="gallery_one" style="display: none;"> 
     <?php 
      $monfolder = "./Photos_realisations_$id"; 
      if(is_dir($monfolder)) 
      { 
       $dossier = opendir($monfolder);   // j'ouvre le dossier 
       $bdd_array = array();    // je créé un tableau 
       while ($Fichier = readdir($dossier)) // je lis chaque élément contenu dans le dossier avec une boucle while 
       { 
        if(!in_array($Fichier,array(".","..",".DS_Store"))) // si l'element lu, n'est pas l'un des éléments suivants 
        { 
         $bdd_array[] = $Fichier; // je rajoute l'élément au tableau 
        } 
       } 
       sort($bdd_array);     // je trie mon tableau 
       foreach($bdd_array as $File)   //pour chaque éléments du tableau 
       { 
        $nomFichier = $File; 
        if(strstr($nomFichier, 'site')) //Code à exécuter si la sous-chaine chaine2 est trouvée dans chaine1 
        { 
         $nomFichier = $File; 

     ?> 
         <a rel ="<?php echo $album; ?>" class="image-show" href="<?php echo $monfolder."/".$nomFichier; ?>"><img src="<?php echo $monfolder."/".$nomFichier; ?>" alt=""/></a>   
     <?php 
        }   // fin if 
       }    // fin foreach 
       closedir($dossier); // je ferme le dossier 
      }  
     ?> 
    </div> <!--fin gallery_one--> 
</div> 

這裏是CSS

.boite_real{ 
    float: left;width: 24%; 
    margin-bottom: 10px; 
    margin-right: 1.25%; 
    position: relative; 
} 

.real{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    font-size: 13px;color: #3C3C3B; 
    background-image: url('fond_blanc.png'); 
    background-repeat: repeat; 
} 

.boite_real:nth-child(4n+0){ margin-right: 0;} 

.real div{ ont-size: 12px;line-height: 13px;margin: 5px;} 

.real div div{ 
    margin: 0 auto;text-align: center;width: 100%; 
    font-size: 13px;font-weight: 700;padding-top: 5px; 
} 

.monbloc{ 
    position: absolute;top: 0;left: 0; 
    width: 100%; 
    height: 99.9999%;overflow: hidden; 
    background: transparent; 
} 

    .layout { 
     display: table; 
     height: 100%;width: 100%; 
     overflow: hidden; 
     text-align: center; 
     *position: relative; 
     overflow: hidden; 
    } 

    .layout-wrapper { 
     display: table-cell; 
     vertical-align: middle; 
     width: 100%; 
     *left: 0; 
     *position: absolute; 
     *top: 50%; 
     background: rgba(255, 255, 255, 0); 
     -webkit-transition: background .5s ease-out; 
     -moz-transition: background .5s ease-out; 
     -o-transition: background .5s ease-out; 
     transition: background .5s ease-out; 
    } 

    .layout-wrapper:hover {background: rgba(255, 255, 255, .75);} 

    .layout-content { 
     display: -moz-inline-stack; 
     display: inline-block; 
     *display: inline; 
     *left: 0; 
     *position: relative; 
     *zoom: 1; 
     *top: -50%; 
     width: 100%; 
    } 

    .layout-content { display: none; } 

    .layout-wrapper:hover .layout-content{ display: -moz-inline-stack;display: inline-block;} 

Answer 1

對於水平位置可以設置的fancybox容器下面的樣式，只要它是在一個背景下，是視口的全寬：

margin:0 auto; 

對於垂直居中...嗯，有各種方法或多或少的工作。

This should help for centering in CSS