使用javascript（JQuery Tools Scrollable）中心更改CSS宽度

Question

我正在使用JQuery Tools Scrollable来构建一个完整页面宽度的可滚动窗体，这样表单的每个页面在整个页面中都一路滚动，由下一个页面从右侧滑入。

我遇到的问题是如何在浏览器调整大小和浏览器内缩放（Ctrl +/-）的过程中，使每个页面居中，以使其居中居中。我的代码是基于：http://flowplayer.org/tools/demos/scrollable/site-navigation.html

我试图包围我的代码在这样一个div：

<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;"> 

但是，由于这个div本身定位在页面的中间，滚动页面唐一直滑到左边缘 - 它们在距离左边约30％的div边缘切出，看起来很糟糕。

我能想到的唯一结论是动态改变利润率左我在DIV类中定义=“项目”，以确保它总是等于50％ - 440px，但不小于0

我怎样才能使用JavaScript做到这一点？

Answer 1

是容器div绝对或相对位置？如果它具有特定的宽度，我们假设为“800px”，然后水平居中很容易，左右两边都有自动边距。 margin: 0 auto。否则它会变得更有趣。

如果你想响应在JavaScript中调整大小，在jquery我做一些像$(window).resize(function() {})（docs here）和处理函数内更新一些CSS值。如果您只想增加宽度但仍有自动边距，则可以选择div并更新宽度属性，例如， $('.mydiv').css('width', '900px');。这会在任何时候调整窗口大小时触发。