如何使浮动元素内的图片在父元素高度中垂直居中？

嘿，我来帮你搞定这个问题～ 你现在的代码里vertical-align:middle没生效，主要是因为浮动元素内没有合适的垂直对齐参照，而且图片也没设置继承父元素高度的样式。下面给你两种实用的解决方案：

方案1：使用Flexbox（现代浏览器首选） #

Flexbox是现在处理布局对齐最省心的方式，完全不需要依赖浮动的特性，还能轻松实现垂直居中。你可以修改你的CSS代码：

.navbar__brand, .navcontainer { 
  float:left; 
  /* 给浮动元素添加Flex布局 */
  display: flex;
  align-items: center; /* 垂直居中 */
  /* 这里可以设置父元素的高度，比如你需要的高度 */
  height: 60px; 
}
.navbar__brand img {
  height: 100%; /* 继承父元素高度 */
  width: auto; /* 保持图片比例，避免拉伸 */
}
.navbar__menu { display:inline-block; }
.navbar__menu li { display:inline-block; list-style: none; }

这样修改后，.navbar__brand作为Flex容器，里面的图片会自动垂直居中，同时height:100%让图片继承父元素的高度，width:auto保证图片不会变形。

方案2：兼容旧浏览器的伪元素法 #

如果你需要兼容IE9及以下的浏览器，可以用伪元素来创建垂直对齐的参照：

.navbar__brand, .navcontainer { 
  float:left; 
  height: 60px; /* 必须设置父元素高度 */
  line-height: 60px; /* 和高度一致，辅助对齐 */
}
/* 添加一个伪元素作为垂直居中的参照 */
.navbar__brand::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.navbar__brand img {
  vertical-align: middle;
  height: 100%; /* 继承父元素高度 */
  width: auto;
}
.navbar__menu { display:inline-block; }
.navbar__menu li { display:inline-block; list-style: none; }

这个方法的原理是通过伪元素创建一个和父元素等高的inline-block元素，让图片和这个伪元素垂直对齐，从而实现居中效果。

注意事项 #

• 不管用哪种方法，都需要给.navbar__brand设置明确的高度（或者让它继承父元素.navbar的高度），这样图片才能有明确的高度可以继承。
• 如果你的.navbar本身有高度，也可以把height:100%加到.navbar__brand上，让它继承.navbar的高度，这样更灵活。

内容的提问来源于stack exchange，提问作者user3541631