同じ高さを持っていてもFlex Divsは整列しません

Question

divsが含まれている画像の高さがdivと同じでない場合、divsがparent-divの最上部にとどまらないという問題があります。他のもの。

私のnavbarにはさまざまなサイズのアイコンがあります。私はdisplay: flexを使ってdiv内のアイコンを整列させるdivに入れました。 div要素はすべて同じ高さを持っていますが、それぞれのdivのイメージが同一でない場合は、このスニペットで見られるように、小さなマージンは、それらの上に表示されます：

#navbar-right { 
 
\t position: absolute; 
 
\t top: 10px; 
 
\t right: 300px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-family: 'Comfortaa', cursive; 
 
\t font-size: 0px; 
 
\t line-height: 1; 
 
\t color: #3F3F3F; 
 
\t border: 1px solid blue; 
 
} 
 

 
#navbar-right .navbar-menu { 
 
\t position: relative; 
 
\t display: inline-flex; 
 
    align-items: center; 
 
\t height: 35px; 
 
\t border: 1px solid red; 
 
\t margin: 0; 
 
\t padding: 0; 
 
}

<div id="navbar-right"> 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="24"/> 
 
    </div> 
 
    </a> 
 
\t \t \t 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="20"/> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="30"/> 
 
    </div> 
 
    </a> 
 
</div>

私にはありませんなぜこれが起こるのか、それを修正する方法を理解する。何か案は ？

Answer 1

あなたはコンテナにdisplay: flexを追加する必要があります。あなたがvertical-align: middle;から.navbar-menuクラスを追加する場合、それは仕事をしているようだ

#navbar-right { 
 
     display: flex; 
 
\t position: absolute; 
 
\t top: 10px; 
 
\t right: 300px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-family: 'Comfortaa', cursive; 
 
\t font-size: 0px; 
 
\t line-height: 1; 
 
\t color: #3F3F3F; 
 
\t border: 1px solid blue; 
 
} 
 

 
#navbar-right .navbar-menu { 
 
\t position: relative; 
 
\t display: inline-flex; 
 
    align-items: center; 
 
\t height: 35px; 
 
\t border: 1px solid red; 
 
\t margin: 0; 
 
\t padding: 0; 
 
}

<div id="navbar-right"> 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="24"/> 
 
    </div> 
 
    </a> 
 
\t \t \t 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="20"/> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="30"/> 
 
    </div> 
 
    </a> 
 
</div>

Answer 2

。

#navbar-right { 
 
\t position: absolute; 
 
\t top: 10px; 
 
\t right: 300px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-family: 'Comfortaa', cursive; 
 
\t font-size: 0px; 
 
\t line-height: 1; 
 
\t color: #3F3F3F; 
 
\t border: 1px solid blue; 
 
} 
 

 
#navbar-right .navbar-menu { 
 
\t position: relative; 
 
\t display: inline-flex; 
 
\t align-items: center; 
 
\t vertical-align: middle; 
 
\t height: 35px; 
 
\t border: 1px solid red; 
 
\t margin: 0; 
 
\t padding: 0; 
 
}

<div id="navbar-right"> 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="24"/> 
 
    </div> 
 
    </a> 
 
\t \t \t 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="20"/> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="30"/> 
 
    </div> 
 
    </a> 
 
</div>

Answer 3

.navbar-menuからdisplay:inline-flexを外し、本体容器にそれを追加します。

#navbar-right{ 
    display:inline-flex; 
} 

#navbar-right { 
 
    position: absolute; 
 
    display:inline-flex; 
 
    top: 10px; 
 
    right: 300px; 
 
    padding: 10px; 
 
    font-family: 'Comfortaa', cursive; 
 
    border: 1px solid blue; 
 
} 
 
.navbar-menu { 
 
    position: relative; 
 
    height: 35px; 
 
    border: 1px solid red; 
 
}

<div id="navbar-right"> 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="24"/> 
 
    </div> 
 
    </a> 
 
\t \t \t 
 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="20"/> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div id="menu-language" class="navbar-menu"> 
 
     <img src="/core/img/language.png" width="36" height="30"/> 
 
    </div> 
 
    </a> 
 
</div>