divの中にバーガーアイコンを垂直に配置するにはどうすればいいですか？

Question

私は別の要素の内部にある3 <span>で作られたハンバーガーのアイコンが含まれているナビゲーションメニューがあります：垂直#nav-icon内#nav-icon spanを中央する方法

.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>

を？私が望むのは、ハンバーガーアイコンを中心にしているので、ハンバーガーアイコンを含む他の要素のスタイルを変更する気にはなりません。

Answer 1

私はこの仕事をするために多くの微調整が必​​要でしたが、私はtop: 50%;に加えてtransition: translateY(-50%);を含む知っている良い垂直センタリングのトリックを使用しました。子divにそれらを適用すると、それはサイズの変更された親の中に垂直に中心が置かれます（親はまた位置relativeまたはabsoluteを持つ必要があります）。

コード内の.icon-containerにこれらのスタイルを適用しました。

.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

あなたはフレックスに対して何も持っていない場合は、絶対positionningをドロップすることがあります。

.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>