Использование JQuery для горизонтального центрирования контента на горизонтально прокручиваемой странице

Question

У меня есть страница с 3 областями содержимого (div с классом "section").

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

Я использую JQuery для горизонтальной прокрутки до этих трех элементов. Проблема, которую я имею, состоит в том, чтобы держать содержимое в 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 вы определили разделы, используя простые поля. Вам было бы намного лучше использовать эластичный макет CSS , который предназначен для работы с изменениями размера окна. Взгляните на использование

margin:0 auto;

в CSS-классах вашей обертки, и это должно упростить процесс. Вы также можете подумать о том, чтобы сохранить три раздела в одном элементе div и прокрутить его в один большой фрагмент.

Красивый сайт, кстати!