居中整個網頁（在一個非常廣泛的網站上）？

我有一個寬（3078px）和很長的網頁（1540px）。頁面上有一個大的div，裏面包含6個div，分爲3列和兩行（每行都有一個單獨的div）。當頁面加載時，它會在右上角顯示左上角的div（box1），可以選擇向下滾動或向右滾動以查看其餘內容。居中整個網頁（在一個非常廣泛的網站上）？

我想讓它以加載爲中心，也就是說，我希望中間列（方框2）在加載時顯示在頁面中間，可以選擇左右滾動爲其餘的內容。

是否有任何腳本或CSS/HTML組合可以讓我選擇在加載時在瀏覽器中顯示的內容？基本上，我試圖做的是類似於在瀏覽器窗口中居中整個身體。我正在考慮附加一個名稱爲中間div（box2）的錨點，但我仍然不知道Javascript使它選擇該div作爲左上角加載。請讓我知道如果這有點令人困惑，我可以畫一個草圖來解釋我的意思，如果這可以幫助！（該的jsfiddle鏈接如下）

這裏是CSS：

body { 
    margin:0px; 
    padding:0px; 
    text-align: center; 
    background:black; 
} 
#box1, #box2, #box3, #box4, #box5, #box6 { 
    margin:0px; 
    padding:0px; 
    float:left; 
    display:inline-block; 
    width:1024px; 
    height:768px; 
    background:transparent; 
    border:1px red solid; 
} 
#above { 
    margin:0px; 
    padding:0px; 
    float:left; 
    display:inline-block; 
    width:3078px; 
    height:770px; 
    background:transparent; 
} 
#below { 
    margin:0px; 
    padding:0px; 
    float:left; 
    display:inline-block; 
    width:3078px; 
    height:770px; 
    background:transparent; 
} 
#mainbox { 
    margin: 0 auto; 
    padding:0px; 
    float:left; 
    display:inline-block; 
    width:3078px; 
    height:1540px; 
    background:transparent; 
}

和HTML：

<div id="mainbox"> 
    <div id="above"> 
     <div id="box1"></div> 
     <div id="box2"></div> 
     <div id="box3"></div> 
    </div> 
    <div id="below"> 
     <div id="box4"></div> 
     <div id="box5"></div> 
     <div id="box6"></div> 
    </div> 
</div>

有一個JS提琴太：http://jsfiddle.net/KyMet/

類似的問題會是（去除水平滾動的痛苦） - 如果我有一個非常長的頁面，它垂直滾動，我怎樣才能得到它，以便加載頁面底部的瀏覽器窗口，因此，實際上，您需要向上滾動以查看其餘內容？

來源

2013-05-05 Casper F

你爲什麼不用這個滑塊來實現呢？它只會顯示您想要的內容，並且您可以在其他內容之間滑動？ – drip 2013-05-05 17:51:24

在每個div裏面還會有其他內容，這是互動的（帶有onhover/onclick效果的圖片），所以我不認爲滑動條會起作用。如果你有一些鏈接，也許我可以看看？ – 2013-05-05 18:05:48

你所描述的是一個水平網站，而不是一個垂直網站。橫向的網站並不常見，通常可以避免，但仍然存在，實際上是非常令人印象深刻的，但是由經驗豐富的開發人員掌握。我建議你閱讀以下內容。 – Jawad 2013-05-05 18:06:09

您需要使用一些查詢拉了這一點。

編輯
DEMO

$(function(){ 
    //total width of your wrapper 
    var totalWidth = $('#mainbox').outerWidth(true); 

    //width of the user browser 
    var width = window.innerWidth; 

    //calculate the middle 
    var middle = (totalWidth - width)/2 

    window.scrollTo(middle, 0); 
});

你的CSS
我也建議你清理你的CSS，有很多不必要的存在性。你可以選擇使用這個

body { 
    margin: 0 auto; 
    padding: 0; 
    text-align: center; 
    background: #222; 
    overflow: scroll; 
} 

#box1, #box2, #box3, #box4, #box5, #box6 { 
    margin: 0; 
    padding: 0; 
    float: left; 
    display: block; 
    width: 1024px; 
    height: 768px; 
    border: 1px red solid; 
} 

#box2 { 
    background-color: aqua; /* only for demo */ 
} 

#above { 
    margin: 0px; 
    padding: 0px; 
    display: block; 
} 

#below { 
    margin: 0px; 
    padding: 0px; 
    display: block; 
} 

#mainbox { 
    padding: 0; 
    width: 3078px; 
    height: 770px; 
} 

/* For modern browsers */ 
.clearfix:before, 
.clearfix:after { 
    content:""; 
    display:table; 
} 

.clearfix:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.clearfix { 
    *zoom:1; 
}

來源

2013-05-05 19:17:52

你將不得不使用jQuery scrollto庫

http://demos.flesler.com/jquery/scrollTo/

來源

2013-05-05 18:51:33 bhappy

居中整個網頁（在一個非常廣泛的網站上）？

回答

相關問題