jQuery Scrollable Center活动框架

Question

我正在使用jQuery Tools Scrollable插件。我正在尝试使活动框架位于屏幕的中心。

我将Scrollable包装器设置为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> 

谢谢！

Answer 1

根据我的假设，您可以尝试将其用于CSS：

.items { margin:0 auto; }

Answer 2

Calvin编写的代码有效，但如果您为要显示照片的内容提供近似宽度，则可能会更好。因为，除非我们给出左/右边距，否则它会使项目处于中心位置。

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

Answer 3

我明白了。你不能在.items上使用margin：0 auto，因为.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（）调用，以便在调整浏览大小时重新计算左边距。它很棒！