私のファンシーボックスをいつも窓の中央に置く方法

Question

私は古いフランス語初心者です。ファンシーボックスについて質問があります。 私のjavascriptとプログラミングのスキルは新しいものです。 あなたのご理解ありがとうございます

私は多くの親指をフォルダから来ています。 各Thumbは関連付けられたピクチャでスライドショーを表示するためにファンシーボックスを開くことができます 私は望みのことをすることができますが、別の問題が発生しました。 常に問題があります。 thhumbの数が多いほど、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です：

ここ

あなたはfancyboxコンテナに次のスタイルを設定することができ、水平配置のために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

で、それはビューポートの全幅であるコンテキストであります提供：

margin:0 auto; 

垂直センタリングの場合...多かれ少なかれ機能するさまざまな方法があります。

This should help for centering in CSS