即使 Flex Div 具有相同的高度，它们也不会对齐答案

【问题标题】：Flex Divs won't align even though they have the same height即使 Flex Div 具有相同的高度，它们也不会对齐
【发布时间】：2016-09-28 10:00:25
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>
			
  <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>

【讨论】：