我正在尝试创建一个简单的页面,其中包含由内容区域分隔的导航栏。我无法强制div #cover
在垂直中心对齐。我希望我的设计能够响应,所以我不想在父div content
上指定宽度。
我知道我可以使用flex: 1
来填补该区域的其他区域,但我尝试了这个并且它对我不起作用。
请参见此处:Codepen
.site-content {
display: flex;
flex-direction: column;
}
.navbar {
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
list-style-type: none;
}
li {
margin: 0 10px;
}
.content {
display: flex;
flex: 1;
}

<div class="site-content">
<div class="navbar">
<div class="title">TitLe</div>
<nav>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</div>
<div class="content">
<div id="cover">
Lorem ipsum
</div>
</div>
</div>
&#13;
答案 0 :(得分:2)
您需要为height
定义.site-content
。
.site-content {
display: flex;
flex-direction: column;
height: 100vh; /*new*/
}
或者在html
,body
和.site-content
标记上设置百分比高度。
html, body, .site-content {
height: 100%;
}
还根据需要重置body
上的默认边距。
body {
margin: 0;
}
要垂直居中#cover
,请在容器上使用align-items
。
.content {
display: flex;
flex: 1;
align-items: center; /*new*/
}
<强> Updated Codepen 强>