eloism eloism - 2 months ago 9
CSS Question

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

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

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>