如何使左浮动（float left）的图片在div中垂直居中？

嘿，我来帮你解决这个问题！你现在的情况是给图片加了float: left后，没法让它在父div里垂直居中，对吧？这是因为浮动元素会脱离正常的文档流，vertical-align对它根本不起作用。下面给你几种实用的解决方法，你可以根据自己的需求选：

方法一：用Flexbox布局（推荐） #

这是现在最简洁高效的方案，现代浏览器都支持，完全不用依赖浮动。只需要修改父元素的CSS，用Flex来控制对齐：

.full_p {
  width: 100%;
  height: 80px;
  border: 1px solid #000;
  /* 开启Flex布局 */
  display: flex;
  align-items: center; /* 让子元素垂直居中 */
}
.full_p img {
  width: 50px;
  border-radius: 50%;
  /* 去掉float，Flex已经能控制横向排列 */
  margin-right: 10px; /* 如果图片后面有文字，加个间距避免挤在一起 */
}

原理很简单：display: flex把父元素变成Flex容器，align-items: center会让所有子元素在垂直方向上居中对齐，不管子元素的高度是多少，都能完美适配。

方法二：绝对定位+transform #

如果不想用Flexbox，也可以用定位的方式实现。父元素设相对定位，图片设绝对定位，再通过位移来居中：

.full_p {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: left;
  border: 1px solid #000;
  position: relative; /* 父元素设相对定位，作为图片定位的参照 */
}
.full_p img {
  width: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%; /* 让图片顶部对齐父元素垂直中点 */
  transform: translateY(-50%); /* 向上移动自身高度的一半，实现垂直居中 */
  left: 0; /* 靠左对齐，模拟float:left的效果 */
}

注意：如果父div里有文字，记得给文字加个左边距（比如padding-left: 60px），避免被图片挡住。

方法三：inline-block代替float #

如果需要兼容旧浏览器（比如IE8及以上），可以把图片的float改成inline-block，结合vertical-align和父元素的line-height来实现：

.full_p {
  width: 100%;
  height: 80px;
  line-height: 80px; /* 让文字垂直居中的同时，也能辅助图片对齐 */
  text-align: left;
  border: 1px solid #000;
}
.full_p img {
  display: inline-block; /* 把图片改成行内块元素 */
  width: 50px;
  vertical-align: middle; /* 垂直居中对齐 */
  border-radius: 50%;
  margin-right: 10px;
}

这种方法的原理是，inline-block元素会参与正常文档流，vertical-align: middle就能和父元素的line-height配合，让图片垂直居中。

总结一下，优先选Flexbox方案，代码少、逻辑清晰，适配各种场景；如果要兼容老浏览器，就选第三种方法；定位的方式适合一些特殊布局需求。

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