虽然Flex Divs具有相同的高度，但它们不会对齐

Question

我遇到了一个问题，如果它们包含的图像的高度与其父级的高度不一致，div将不会保留在父级div的顶部其他人。

在我的导航栏中，我有不同大小的图标，我把它们放在div上，我使用display: flex来垂直对齐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到容器：

#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

看来，如果你添加一个vertical-align: middle;到.navbar-menu类，它的工作。

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