垂直中心的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在一个列设计

回答

相关问题