如何让Flex项目同时参与基线对齐并保持居中？

问题根源 #

当inline-flex容器设置align-items: center时，所有项目都采用垂直居中对齐，没有项目参与基线对齐，因此容器基线会根据规范规则2，由第一个flex项目（示例中的图片）的下边框生成，导致外部文本与容器内文本基线错位，容器下方出现额外空白。

方法1：让文本项目参与基线对齐（符合规范规则1） #

给容器内的文本项目单独设置align-self: baseline，触发规范中的规则1——容器基线由参与基线对齐的项目（文本）的基线生成，同时其他项目（如图片）保持垂直居中。

div {
  background-color: #2C3531;
  color: #D9B08C;
}

span {
  background-color: #116466;
}

img {
  width: 40px;
  height: 40px;
  align-self: center; /* 图片保持垂直居中 */
}

.container {
  display: inline-flex;
  align-items: center;
}

.container .text {
  align-self: baseline; /* 让文本参与基线对齐 */
}

<div>
  Hello
  <span class="container">
    <img src="https://openclipart.org/image/400px/218125"/>
    <span class="text">World</span>
  </span>
</div>

方法2：用伪元素隐式触发基线对齐（无需修改HTML） #

给flex容器添加空伪元素作为第一个项目，并设置align-self: baseline，容器会基于这个伪元素的基线（与文本基线一致）生成自身基线，内部原有项目仍保持垂直居中。

div {
  background-color: #2C3531;
  color: #D9B08C;
}

span {
  background-color: #116466;
}

img {
  width: 40px;
  height: 40px;
}

.container {
  display: inline-flex;
  align-items: center;
}

.container::before {
  content: "";
  align-self: baseline; /* 伪元素触发基线对齐规则 */
}

<div>
  Hello
  <span class="container">
    <img src="https://openclipart.org/image/400px/218125"/>
    World
  </span>
</div>

方法3：快速消除额外空白（非严格基线对齐） #

如果仅需要解决容器下方的额外空白问题，无需严格对齐文本基线，可以给inline-flex容器设置vertical-align: bottom，让容器底部与外部文本基线对齐，内部项目仍保持垂直居中。

.container {
  display: inline-flex;
  align-items: center;
  vertical-align: bottom;
}

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