jQuery Scrollable Centerアクティブフレーム

Question

私はjQueryツールスクロール可能なプラグインを使用しています。アクティブなフレームが画面の中央にくるようにしようとしています。

私は100％幅に設定されたスクロール可能なラッパーを持っていて、それは素晴らしいですが、アクティブなフレームは左に揃えられています。私が望むのは、アクティブなフレームを中心にすることです。より良い説明のために、私が達成しようとしているもののこのモックアップを見てください。

FYI：これは私の構造体である：

<div class="scrollable"> 
    <div class="prev browse left disabled"></div> 

    <div class="items"> 
     <div class="pane"> 
      Content 
     </div> 
     <div class="pane"> 
      Content 
     </div> 
    </div> 

    <div class="next browse left"></div> 
</div> 

ありがとう！

Answer 1

私はそれを理解しました。 .itemsが大きすぎるので、margin：0 auto on .itemsを使用することはできません。 Umeshは幅を.itemsで指定することでこれに対処しようとしましたが、これは動的ではありません。また、jQuery Tools Scrollableはアクティブなフレームを左に配置しようとします。

ここは私がしたものです。

私はブラウザの100％の幅としてスクロール可能な設定をしました。 .paneは常に800px幅です。

は、その後、私はこのJavaScriptを書いた：

// Get window width 
var winWidth = jQuery(window).width(); 

// winWidth divided by 2, subtract half the width of .pane 
var itemsMargin = (winWidth/2)-400; 

// Resize the homepage scrollable panes 
jQuery('.scrollable .items').css('margin-left', itemsMargin+'px'); 

これは、オールウェイズ、画面の中央に積極的に.paneのセンターを併設しています。次に、ブラウズのサイズを変更するときに左余白を再構築するために.resize（）コールバックを設定します。それは素晴らしい作品です！

Answer 2

私の仮定から、あなたはCSSのためにこれを入れてみてくださいすることができます：カルバンによって

.items { margin:0 auto; } 

Answer 3

コードは動作しますが、あなたが表示したいコンテンツへのおおよその幅を提供する場合、再びそれがより良いかもしれません写真。なぜなら、左/右マージンを与えない限り、アイテムを中央に置くからです。

.scrollable { 
    background-color: black; 
    width: 100%; 
} 
.items { 
    margin: 0 auto; 
    width: 400px; 
}