垂直中心的div在一個列設計

我回到html/css後長期中斷，需要一些幫助。垂直中心的div在一個列設計

背景：我使用1列布局和jQuery在用戶與固定導航欄交互時自動將頁面滾動到各個div。

問題：當您在垂直分辨率比我的筆記本電腦或移動設備更大的屏幕上查看頁面時，您可以同時看到全部或部分不同的div部分。

問題：有沒有一種垂直分隔div的方法，以便滾動功能類似於如果我使用鏈接到不同文件的傳統導航欄？換句話說，我不想一次看到所有的div，只是用戶點擊的那個div。

非常感謝！

2012-09-17 Rarw

向我們展示[您嘗試過的]（http：//www.whathaveyoutried。 COM）。 – Kermit

<div id="content"> 
    <div class="container"> 
     <div class="pseudopage"> 
      foo 
     </div> 
    </div> 
</div>

有了這個基本結構（重複的「容器」的div），然後你可以這樣做：

#content{ 
    border: 1px solid black; 
    height: DESIRED_HEIGHT; 
    width: DESIRED_WIDTH; 
    overflow:hidden; 
} 

.container {   
    height:100%; 
    width:100%; 
    text-align:center; 
} 

.pseudopage { 
    vertical-align:middle; 
    display:inline-block; 
    margin:px; 
} 
div.container:before{ 
    content: '';   
    height:100%; 
    width: 0px; 
    margin:0px; 
    vertical-align:middle; 
    display:inline-block; 
}

享受！另外，＃內容div很可能是頁面的主體，但您必須記得設置一個高度。（專業提示 - 如果您將html的高度設置爲100％，將body設置爲100％，那麼您將填滿屏幕。）

來源

2012-09-18 00:07:32 FrankieTheKneeMan

所以容器真的是你正在對齊，並在中間顯示pseudopage是正確的？它的工作，我只是想了解爲什麼。 – Rarw

是的，您將容器對齊爲頁面的大小。通過使容器不可見，當屏幕大小發生變化時它會自動增長，並將其他信息推出內容div的邊緣。然後，您可以在容器div中對齊僞容區div，然後始終確保它相對於整個頁面。 – FrankieTheKneeMan

垂直中心的div在一個列設計

回答

相關問題