Bars inside mobile menu button do not appear in vertical center

Question

With the code below I created a mobile menu button .container inside my .navigation. All this works fine so far.

However, I want that the .bars inside the mobile menu button to be vertically centered. I tried to go with vertical-align: center; but could not make it work.

What do I have to change in my code so the .bars in the mobile menu button .container get vertically centered?

You can also find my code 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>

Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Salketer, Aug 22 '17 at 09:32
vertical-align: center; does not exist. Should be vertical-align: middle; — Gerard, Aug 22 '17 at 09:38

score 1 · Accepted Answer · answered Aug 22 '17 at 09:38

Because you are already using flexbox, add the following styles to bars:

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

and add margin: 4% 0 for the bar1,bar2 and bar3

See demo below:

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>

@Michi cool, could you please upvote and finish the question too, thanks! — kukkuz, Aug 22 '17 at 09:43
Do you think you also have an idea for that https://stackoverflow.com/questions/45810332/sub-sub-menus-do-not-appear — Michi, Aug 22 '17 at 09:47

score 0 · Answer 2 · edited Aug 22 '17 at 10:27

0

You can use display:flex

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

edited Aug 22 '17 at 10:27

mrogal.ski

5,828
1
21
30

answered Aug 22 '17 at 09:36

Dmytro Lishtvan

788
7
12

and remove margin from your .bar child – Dmytro Lishtvan Aug 22 '17 at 09:40

score 0 · Answer 3 · answered Aug 22 '17 at 09:43

The easiest way would be to use display: flex; on .bars; Then flex-direction: column; and justify-content: center;

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

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

This will work, but the bars won't look quite right because .bar1 has a margin-top of 8%. If you only apply margin-top to .bar2 and .bar3 then it will look right.

.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

3 Answers3