如何在align-items为baseline的flex父容器中垂直居中图标

当前布局示意图：

布局结构说明：

• 左侧为产品图标，H1标签承载产品分类，H2标签承载产品名称
• 图标、H1、H2均置于一个设置了display: flex且align-items: baseline的父div中，因此H1和H2的文本保持基线对齐
• 因页面标题为动态获取，图标必须放在这个基线对齐的父容器内

需求：通过flexbox方案实现图标在父容器内垂直居中，不使用垂直对齐或行高的方法。

当前父容器CSS代码：

.parent {
  display: flex;
  align-items: baseline;
}

HTML结构：

<div class="parent">
  <div>Icon</div>
  <div>Product Category</div>
  <div>Product Name</div>
</div>

给图标所在的子容器添加align-self: center样式，即可在保持H1、H2文本基线对齐的同时，让图标垂直居中。

修改后的CSS #

.parent {
  display: flex;
  align-items: baseline;
}

.icon-wrap {
  align-self: center;
  margin-right: 0.5rem; /* 可选，为图标与文本添加间距 */
}

对应HTML结构 #

<div class="parent">
  <div class="icon-wrap">Icon</div>
  <div>Product Category</div>
  <div>Product Name</div>
</div>

原理说明 #

align-self属性可以单独覆盖父容器的align-items设置，指定单个flex子项的垂直对齐方式。这里将图标容器的align-self设为center，就能让它在父容器内垂直居中，而其他子项（产品分类、产品名称容器）仍遵循父容器的baseline对齐规则，满足文本基线对齐的需求。

内容的提问来源于stack exchange，提问作者Mabeh Al-Zuq Yadeek