0

jQueryToolsScrollableプラグインを使用しています。アクティブなフレームが画面の中央にくるようにしようとしています。

スクロール可能なラッパーを100％の幅に設定していて、うまく機能しますが、アクティブなフレームは左に揃えられています。私が欲しいのは、アクティブなフレームを中央にすることです。より良い説明については、私が達成しようとしていることのこのモックアップを参照してください。

アクティブフレームを中央に配置するにはどうすればよいですか？

参考：これは私の構造です：

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

ありがとう！

4

3 に答える 3

0

Code by Calvin は機能しますが、写真を表示したいコンテンツにおおよその幅を提供する方が良いかもしれません。なぜなら、左右の余白を与えないと、アイテムが中央に配置されるからです。

.scrollable {
    background-color: black;
    width: 100%;
}
.items {
    margin: 0 auto;
    width: 400px;
}
于 2011-12-21T08:39:39.717 に答える
0

私はそれを考え出した。.items が広すぎるため、.items で margin: 0 auto を使用することはできません。Umesh は幅 it.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() コールバックをセットアップして、ブラウズのサイズが変更されたときに左マージンを再調整します。それはうまくいきます！

于 2011-12-21T18:28:15.233 に答える
0

私の仮定から、これをCSSに入れてみることができます：

.items { margin:0 auto; }
于 2011-12-21T07:59:57.980 に答える