行内元素vertical-align:middle偏移，图标与文本垂直居中如何实现？

我之前也碰到过这个坑！其实vertical-align: middle没你想的那么“完美居中”——它的对齐基准是文本的x-height（小写字母x的高度）中点，不是整个文本行的垂直中心，所以在不同字体、不同图标尺寸下，很容易出现图标略微偏低的情况。给你几个靠谱的解决办法：

方法1：用Flex布局（最推荐，兼容性好） #

直接给父元素设置Flex布局，让子元素垂直居中，这是最省心的方案，完全不用纠结对齐基准的问题：

<div class="icon-group">
  <img src="your-icon.png" alt="图标" class="icon">
  <span>需要对齐的文本</span>
</div>

<style>
.icon-group {
  display: flex;
  align-items: center; /* 核心属性，垂直居中 */
  gap: 6px; /* 可选，给图标和文本加间距，更美观 */
}
.icon {
  width: 20px; /* 根据你的需求调整尺寸 */
  height: 20px;
}
</style>

方法2：微调vertical-align的数值 #

如果不想改布局，可以给图标设置具体的偏移值，代替单纯的middle：

.icon {
  vertical-align: middle;
  /* 根据实际情况微调，正负值都试试 */
  vertical-align: -2px; 
}

这个数值需要你根据图标和文本的实际大小调整，比如图标越大，可能需要的负数值越大。

方法3：清除图标自身的空白 #

有时候图标本身的图片文件带有多余的留白（比如SVG的viewBox设置不对），先检查一下图标尺寸，确保它的实际内容是充满容器的：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain; /* 确保图标内容填满容器 */
}

方法4：调整父元素的line-height #

如果父元素的line-height设置得过大，也会影响对齐效果。可以把父元素的line-height设为和文本高度一致，或者设为normal：

.icon-group {
  line-height: 1.2; /* 或者根据文本大小调整，比如16px */
}
.icon {
  vertical-align: middle;
}

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