Flex Divs即使具有相同的高度也不会对齐

Question

我遇到的问题是，如果div包含的图像与其他图像的高度不同，则div不会保留在父div的顶部。

在我的导航栏中，我有不同大小的图标，我将它们放在div中，我使用display: flex来垂直对齐div内的图标。 div都具有相同的高度，但如果每个div的图像不相同，则在它们上方会出现一个小的边距，如下面的代码段所示：

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

我不明白为什么会发生这种情况，也不知道如何解决这个问题。有什么想法吗？

Answer 1

您必须将display: flex添加到容器中：

#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

似乎如果你向vertical-align: middle;类添加.navbar-menu，它就可以完成这项工作。

#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

从display:inline-flex移除.navbar-menu并将其添加到主容器中：

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