ビューポート

Question

イムこのテンプレート

http://tympanus.net/Tutorials/WebsiteScrolling/を使用して、現時点で16000pxである水平方向のウェブサイトを構築しようとしている

ウェブサイトは4000PXはそれぞれ広い、私が達成しようとしている四つの部分を持っていますdivは各セクションのブラウザビューポートの中央に配置されます。

垂直方向には50％が動作しますが、水平方向には50％がページに2000pxになります。

誰もがうまくいくものを知っていますか？

---

私は最初のページに私の#verycentre事業部をセンタリングするためのスクリプトを発見した、それは、4000PXの50％をイマイチそのブラウザウィンドウのと素晴らしいです。

私が今問題にしているのは、各セクションのアンカーに中央のウィンドウのdivが必要なことです。

ページがスクロールして各セクションにヒットすると、各セクションのサイズ変更可能な#verycentre Divを達成しようとしています。

私は、現時点で使用していたコードは、下に掲載し、私は問題は、関数呼び出しが

document.ready作られていることかもしれないと思うセクション1.

の最初の中心のdivのために完璧に動作していますその時点ではウィンドウ内に1つの#verycentred divしかありませんが、100％確実ではありません。

各アンカーポイントの#verycentred Divをすべて中央揃え/ resieableにするにはどうすればよいですか？

おかげ

Answer 1

あなた幅オフセットウィンドウの面積はCSSを経由して、それを中央に問題になるので、何を使用することができますすることで、ウィンドウの位置に

テイクを基づいて、そのDIVを中心に役立つ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>