使用下面的代码,我在.container
中创建了一个移动菜单按钮.navigation
。到目前为止,所有这些工作正常。
但是,我希望移动菜单按钮内的.bars
垂直居中。我尝试使用vertical-align: center;
,但无法使其正常工作。
我必须在代码中进行哪些更改,以便移动菜单按钮.bars
中的.container
垂直居中?
您也可以找到我的代码here
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
vertical-align: center;
}
.bar1, .bar2, .bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin-top: 8%;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>
最佳答案
因为您已经在使用flexbox
,所以将以下样式添加到bars
:
display: flex;
justify-content: center;
flex-direction: column;
并为
margin: 4% 0
,bar1
和bar2
添加bar3
请参见下面的演示:
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.bar1,
.bar2,
.bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin: 4% 0;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>