0

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

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

谢谢！

4

3 回答 3

0

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

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

Calvin 的代码可以工作，但是如果您为要显示照片的内容提供大致的宽度，这可能会更好。因为，除非我们给出左右边距，否则它将使项目位于中心。

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

我想到了。您不能在 .items 上使用 margin: 0 auto 因为 .items 太宽。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 回答