雖然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>