水平ウェブサイトのラッパーを中心にする

Question

私は、横幅が12500ピクセル、横に5ページのウェブサイトを作っています。

http://70.33.241.140/~flori281/website/

問題は、私はラッパーをセンタリングすることができます方法がわからないということですか？さまざまな画面幅があるためです。 divの ".box"を自動的に画面幅に合わせる方法はありますか？

Answer 1

CSSを経由して水平にセンタリングがmargin-leftとmargin-rightプロパティの設定autoを使用して行われます：

.centered { 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 2

あなたのラッパーホルダーのdiv CSSが

.box { 
    float: left; 
    line-height: 22px; 
    width: 2400px; 
} 

ことがあるので、それは、2400pxの幅を持っていますなぜなら、あなたはそれを中心と見なさない理由ですが、それは中心に置かれています。

Answer 3

あなたはつもりはあなたのCSSのいくつかのものを変更する必要があります。

#content{ 
    height:100%; 
    width:100%; 
    left:0; 
    top:0; 
    position:absolute; 
} 
.box{ 
    line-height:22px; 
} 

は今、私はあなたが何をしようとして理解しています。その場合は、javascriptを使用する必要があります。しかし、私が与えている例のようにCSSを残しておくと、ロード時に見栄えがよくなります。あなたは、ウィンドウのサイズを変更したときに、それはサイズを変更したい場合は

$(document).ready(function(){ 
    var actualContentWidth = $("#content").width(); 
    var boxes = $("#content .box").length; 
    var newWidth = boxes * actualContentWidth; 
    newWidth += "px"; 
    $("#content").css({width:newWidth }); 
    $("#content .box").css({width:actualContentWidth + "px",float:'left'}); 
}); 

：

function reCalculateSizes(){ 
    $("#content").css({width:"100%"}); 
    var actualContentWidth = $("#content").width(); 
    var boxes = $("#content .box").length; 
    var newWidth = boxes * actualContentWidth; 
    newWidth += "px"; 
    $("#content").css({width:newWidth }); 
    $("#content .box").css({width:actualContentWidth + "px",float:'left'}); 
} 
$(document).ready(reCalculateSizes); 
$(window).resize(reCalculateSizes);