Viewport центрирования на большом сайте

Question

Im пытается построить горизонтальный сайт, который находится в 16000px на данный момент, с помощью этого шаблона

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

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

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

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

---

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

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

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

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

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

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

Как я могу сделать все элементы с четырьмя центрами в каждой точке привязки центрированными/доступными?

благодаря

Answer 1

Это будет проблема для центрирования его с помощью CSS, так как ваша ширина Смещения области окна так, что вы могли бы использовать это функция JQuery, которая поможет вам центрирование, что Див на основе оконного позиции

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

Using jQuery to center a DIV on the screen

Answer 2

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

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

Answer 3

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