jquery - 使用 JQuery 在水平滚动页面中水平居中内容

Question

我有一个包含 3 个内容区域的页面(带有“section”类的 div)。

http://refreshperspective.com/CLIENTS/unboxed/products.html

我正在使用 JQuery 水平滚动到这三个 div。我遇到的问题是在调整窗口大小时保持 div 中的内容居中。我一直在使用以下代码:

var wind = $(window).width();
$(".section").width(wind);
$(window).resize(function(){
var windRe = $(window).width();
$(".section").width(windRe);
});

这在加载的第一个 div(主屏幕)上完美运行，但当您向右滚动到三个 div 中的另一个时会失败。

当调整这些大小时，div 会远离中心(当窗口向右调整大小时，会向右移动，反之亦然)。关于如何让其他两个内容区域保持居中(应该与绝对定位的底部导航保持一致)(如第一个加载的 div)的任何想法都会很棒。

Answer 1

问题是在您的 CSS 中，您使用简单的边距定义了各个部分。使用 elastic CSS layout 会更好旨在处理窗口大小变化。看看使用

margin:0 auto;

在你的包装CSS类中，这应该会让它变得更容易。您可能还需要考虑将三个部分保留在一个 div 中并将其滚动到一大块中。

顺便说一句，网站看起来不错!