Flex Divs won't align even though they have the same height - html

Question

I'm having a problem where divs won't stay on the top of their parent-div if the image they contain doesn't have the same height as the others ones.
In my navbar I have icons of different sizes, I put them in divs on which I use display: flex to verticlly align the icons inside the divs. The divs all have the same height, but if the image of each div isn't identical, a small margin appear above them, as seen in this snippet :
#navbar-right {
position: absolute;
top: 10px;
right: 300px;
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
font-size: 0px;
line-height: 1;
color: #3F3F3F;
border: 1px solid blue;
}
#navbar-right .navbar-menu {
position: relative;
display: inline-flex;
align-items: center;
height: 35px;
border: 1px solid red;
margin: 0;
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>
<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>
I don't understand why this happens nor how to fix it. Any ideas ?

Answer 1

You have to add display: flex to the container:
#navbar-right {
display: flex;
position: absolute;
top: 10px;
right: 300px;
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
font-size: 0px;
line-height: 1;
color: #3F3F3F;
border: 1px solid blue;
}
#navbar-right .navbar-menu {
position: relative;
display: inline-flex;
align-items: center;
height: 35px;
border: 1px solid red;
margin: 0;
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>
<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

It seems that if you add a vertical-align: middle; to the .navbar-menu class, it does the job.
#navbar-right {
position: absolute;
top: 10px;
right: 300px;
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
font-size: 0px;
line-height: 1;
color: #3F3F3F;
border: 1px solid blue;
}
#navbar-right .navbar-menu {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
height: 35px;
border: 1px solid red;
margin: 0;
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>
<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

Remove display:inline-flex from .navbar-menu and add it to main container:
#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>
<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>