如何垂直居中inline-block元素？容器内图标垂直对齐求助

问题核心是inline-block元素默认垂直对齐基线（baseline），当两个图标尺寸不同时，就会出现左侧图标被推至容器底部的错位问题。不用flex的话，最直接的解决方案是调整垂直对齐属性，或者配合行高实现。

方案1：通用垂直对齐设置 #

给所有inline-block图标添加vertical-align: middle，让元素中线与父容器中线对齐，实现类似align-items:center的效果。

HTML代码 #

<div class="container">
  <span class="icon icon-sm">📱</span>
  <span class="icon icon-lg">🖥️</span>
</div>

CSS代码 #

.container {
  width: 300px;
  height: 120px;
  border: 1px solid #ddd;
  text-align: center; /* 可选：水平居中图标 */
}

.icon {
  display: inline-block;
  /* 关键属性：设置垂直对齐方式为middle */
  vertical-align: middle;
}

.icon-sm {
  font-size: 32px;
}

.icon-lg {
  font-size: 64px;
}

方案2：固定容器高度配合行高 #

如果容器高度固定，可以给容器设置line-height等于容器高度，再给图标添加vertical-align: middle，同样能实现垂直居中。

CSS代码调整 #

.container {
  width: 300px;
  height: 120px;
  border: 1px solid #ddd;
  text-align: center;
  line-height: 120px; /* 行高等于容器高度 */
}

.icon {
  display: inline-block;
  vertical-align: middle;
  line-height: normal; /* 重置图标自身行高，避免继承容器行高导致布局异常 */
}

两种方案都能让两个图标在同一行保持垂直居中对齐，不需要依赖flex布局。

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