Центр просмотра на большом сайте

Question

Я пытаюсь создать горизонтальный веб-сайт с 16000 пикселей в данный момент, используя этот шаблон

http://tympanus.net/Tutorials/WebsiteScrolling/

веб-сайт имеет четыре раздела шириной 4000px каждый, я пытаюсь добиться div, который будет центрирован в окне просмотра браузера в каждом разделе.

Вертикально, 50% работает, но по горизонтали 50% будет 2000px на страницу.

Кто-нибудь знает что-нибудь, что будет работать?

---

Я нашел скрипт для центрирования моего #verycentre Div на первой странице, он не 50% от 4000px, это окно браузера и выглядит великолепно.

Проблема, с которой я сталкиваюсь сейчас, заключается в том, что мне нужен центрированный div окна на каждой привязке раздела.

когда страница прокручивается и попадает в каждый раздел, я пытаюсь добиться изменяемого размера #verycentre Div для каждого раздела.

Код, который я использую в данный момент, размещен ниже и отлично работает для первого центрированного div в разделе 1.

Я думаю, что проблема может быть в том, что вызов функции сделан document.ready

и в это время в окне есть только один #verycentred div, но я не уверен на 100%.

как я могу сделать так, чтобы все #verycentred Div в каждой точке привязки были центрированы / переупорядочены?

спасибо

Answer 1

Вы можете использовать отрицательное левое поле с заданной позицией: относительный;

div{
 position:relative;
 left: 50%;
 margin-left: -2000px;
}

Answer 2

<script type="text/javascript">
$(document).ready(function() {
function move_div() {
    window_width = $(window).width() ;
    window_height = $(window).height() ;    

    obj_width = $('#verycentre') .width() ;
    obj_height = $('#verycentre') .height() ;

    $('#verycentre').css('top', (window_height / 2) - (obj_height / 2)) .css('left',       (window_width /2) - obj_width / 2);
    }

    move_div() ;

$(window) .resize(function() {
move_div() ;

});

}) ;
</script> 

Answer 3

Было бы проблемой центрировать его с помощью CSS, так как ваша ширина смещает область окна, поэтому вы можете использовать функцию JQuery, которая поможет вам центрировать этот div на основе положения окна

Посмотрите на этот пост, где объясняется, как центрировать объект на основе отображения области окна.

Использование jQuery для центрирования DIV на экране