Wie zentriere ich ein Burger-Icon vertikal innerhalb eines div?

Question

Ich habe ein Navigationsmenü, das ein Burger-Symbol mit 3 <span> gemacht enthält die in einem anderen Elemente ist:

.navbar { 
 
    width: 100%; 
 
    color: #fff; 
 
    background-color: #df0024; 
 
    padding: 1% 0; 
 
} 
 

 
.tog { 
 
    display: flex; 
 
    cursor: pointer; 
 
    float: right; 
 
    width: 6%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: auto; 
 
} 
 

 

 
/*This is the div that contain the burger 3 layers*/ 
 

 
#nav-icon { 
 
    height: -webkit-fill-available; 
 
    height: -moz-fill-available; 
 
    height: -o-fill-available; 
 
    height: fill-available; 
 
    position: relative; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
/*/The style of each of the burger icon 3 layers*/ 
 
#nav-icon span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 3.1vh; 
 
    width: 100%; 
 
    background: white; 
 
    border-radius: 9px; 
 
    opacity: 1; 
 
    left: 0; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .25s ease-in-out; 
 
    -moz-transition: .25s ease-in-out; 
 
    -o-transition: .25s ease-in-out; 
 
    transition: .25s ease-in-out; 
 
} 
 

 
#nav-icon span:nth-child(1) { 
 
    top: 0px; 
 
} 
 

 
#nav-icon span:nth-child(2) { 
 
    top: 12px; 
 
} 
 

 
#nav-icon span:nth-child(3) { 
 
    top: 24px; 
 
}

<nav class="navbar"> 
 
    <div class="logo"> 
 
    <a href="#"><img src="" alt='Logo' /></a> 
 
    </div> 
 
    <div id='tog' class="tog"> 
 
    <label for="toggle" id='nav-icon'> 
 
    \t \t \t <div class='icon-container'> 
 
    \t \t \t \t <span></span> 
 
    \t \t \t \t <span></span> 
 
    \t \t \t \t <span></span> \t 
 
    \t \t \t </div> \t \t \t \t \t \t \t \t 
 
     \t </label> 
 
    </div> 
 
</nav>

Wie die #nav-icon span innerhalb der #nav-icon vertikal zu zentrieren? Alles, was ich will, ist die Zentrierung des Burger-Symbols, so dass ich mich nicht darum kümmere, den Stil der anderen Elemente zu ändern, die das Burger-Icon enthalten.

Answer 1

Ich musste viel zwicken, um diese Arbeit zu machen, aber ich habe einen schönen vertikalen Zentrierungstrick verwendet, den ich kenne top: 50%; plus transition: translateY(-50%);. Wenn Sie diese auf ein untergeordnetes Element anwenden, wird es vertikal in einem sortierten Elternelement zentriert (das übergeordnete Objekt sollte ebenfalls die Position relative oder absolute haben).

Ich habe diese Stile auf die .icon-container in Ihrem Code angewendet.

.navbar{ 
 
    width: 100%; 
 
    position: relative; 
 
    color: #fff; 
 
    background-color: #df0024; 
 
    padding: 1% 0; 
 
} 
 

 
.tog { 
 
    display: flex; 
 
    cursor: pointer; 
 
    float: right; 
 
    width: 6%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: auto; 
 
} 
 

 
/*This is the div that contain the burger 3 layers*/ 
 
#nav-icon{ 
 
    position: absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right: 0; 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
.icon-container { 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    top: 50%; 
 
    -ms-transform: translateY(-50%); /* IE 9 */ 
 
    -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */ 
 
    transform: translateY(-50%); 
 
} 
 

 

 
#nav-icon span{ 
 
     display: block; 
 
     width: 100%; 
 
     height: 5px; 
 
     margin-bottom: 3px; 
 
     background: white; 
 
     border-radius: 9px; 
 
     opacity: 1; 
 
     -webkit-transition: .25s ease-in-out; 
 
     -moz-transition: .25s ease-in-out; 
 
     -o-transition: .25s ease-in-out; 
 
     transition: .25s ease-in-out; 
 
    }

<nav class="navbar"> 
 
    <div class="logo"> 
 
      <a href="#"><img src="" alt='Logo'/></a> 
 
    </div> 
 
    <div id='tog' class="tog"> 
 
      <label for="toggle" id='nav-icon'> 
 
      <div class='icon-container'> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div>        
 
      </label> 
 
    </div> 
 
</nav>

Answer 2

Wenn Sie nichts gegen flex haben, können Sie auch die absolute Positionierung fallen.

.navbar { 
 
    display: flex; 
 
    align-items: center;/* vertical-centering */ 
 
    color: #fff; 
 
    background-color: #df0024; 
 
    padding: 1% 0; 
 
    /* DEMO PURPOSE ONLY to show vertical centering */ 
 
    transition:0.25s; 
 
    height: 100px; 
 
    background-image:linear-gradient(to top, transparent 50%, rgba(255,255,255,0.15) 50%); 
 
} 
 
.navbar:hover {height:200px;} 
 
    /* end -- DEMO PURPOSE ONLY to show vertical centering */ 
 
nav a { 
 
/* demo purpose , useless about centering */ 
 
    margin: 0 0.5em; 
 
    color: white; 
 
} 
 

 

 

 
.tog { 
 
    cursor: pointer; 
 
    width: 1.5em; 
 
    margin-left: auto;/* goes all the way to the right side */ 
 
} 
 

 

 
/*This is the div that contain the burger 3 layers*/ 
 

 
#nav-icon { 
 
    display: block; 
 
    transform: rotate(0deg); 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 

 
/*The style of each of the burger icon 3 layers*/ 
 

 
#nav-icon span { 
 
    display: block; 
 
    background: white; 
 
    margin: 0.25em 0; 
 
    border-radius: 9px; 
 
    opacity: 1; 
 
    height: 0.25em; 
 
    transform: rotate(0deg); 
 
    transition: .25s ease-in-out; 
 
    box-shadow: 1px 1px 1px; 
 
}

<nav class="navbar"> 
 
    <div class="logo"> 
 
    <a href="#"><img src="" alt='Logo' /></a> 
 
    </div> 
 
    <a href="#">another link ? </a> 
 
    <div id='tog' class="tog"> 
 
    <label for="toggle" id='nav-icon'> 
 
    <div class='icon-container'> 
 
    \t <span></span> 
 
    \t <span></span> 
 
    \t <span></span> \t 
 
    \t </div> \t \t \t \t \t \t \t \t 
 
    </label> 
 
    </div> 
 
</nav>