移动菜单按钮内的条形图不会出现在垂直中心

Question

使用下面的代码，我在 .navigation 中创建了一个移动菜单按钮 .container。到目前为止一切正常。

但是，我希望移动菜单按钮中的 .bars 垂直居中。我尝试使用 vertical-align: center; 但无法正常工作。

我必须在我的代码中更改什么才能使移动菜单按钮 .container 中的 .bars 垂直居中？

你也可以找到我的代码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>

Answer 1

您可以使用display:flex

.bars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

Answer 2

因为您已经在使用flexbox，请将以下样式添加到bars：

display: flex;
justify-content: center;
flex-direction: column;

并为 bar1、bar2 和 bar3

添加 margin: 4% 0

参见下面的演示：

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>

Answer 3

最简单的方法是在 .bars 上使用 display: flex;；然后 flex-direction: column; 和 justify-content: center;

.bars {
 height: 100%;
 width: 100%;

 /* new stuff here: */
 display: flex;
 flex-direction: column;
 justify-content: center;
}

这可行，但条形图看起来不太正确，因为 .bar1 的 margin-top 为 8%。如果你只将 margin-top 应用到 .bar2 和 .bar3 那么它看起来是正确的。

.bar2, .bar3 {
  margin-top: 8%;
}

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%;
 
 /* new stuff here: */
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.bar1, .bar2, .bar3 {
 height: 10%;
 width: 100%;
 background-color: #333;
}
.bar2, .bar3 {
  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>

移动菜单按钮内的条形图不会出现在垂直中心

Bars inside mobile menu button do not appear in vertical center

html

css

vertical-alignment

flexbox