css - 如何让 flex 元素参与基线对齐并居中？

Question

我经常遇到这个问题，其中有一些额外的高度来自某处，并将其缩小到 flex 容器的基线。

一个典型的例子如下:

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

span {
  background-color: #116466;
}

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

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

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

这里的问题是 flex 容器的基线是图像的底部而不是“World”的基线。

8.5. Flex Container Baselines说:

first/last main-axis baseline set

When the inline axis of the flex container matches its main axis, its baselines are determined as follows:

1. If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated from the shared alignment baseline of those flex items.

2. Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)

3. Otherwise, the flex container has no first/last main-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.

在前面的示例中，我认为自 align-items: center 以来没有任何元素参与基线对齐。因此规则 1 不适用。

最开始的 flex 元素是图像，因此根据规则 2，基线将从底部边框合成。

交换文本和图像显示了具有不同的起始 flex 元素的效果:

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

span {
  background-color: #116466;
}

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

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

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

规范中规定使用哪个 flex 元素的选择似乎有些随意。

我们可以通过使用 flex-direction: row-reverse; 来完成这项工作，但这不是通用的解决方案。

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

span {
  background-color: #116466;
}

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

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

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

我能想到的最后一件事就是放弃使用flexbox居中并使用align-items:baseline;行高:40px； 改为:

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

span {
  background-color: #116466;
}

img {
  width: 40px;
  height: 40px;
  align-self: center;
}

.container {
  display: inline-flex;
  align-items: baseline;
  line-height: 40px;
}

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

虽然现在基线是正确的，但垂直居中有点麻烦，并且需要高度匹配，这不太理想。

是否有其他方法可以让 flex 元素参与基线对齐，同时仍然通过中心对齐？

Answer 1

在开头添加一个空元素应该可以。您可以使用 ::before 伪元素来实现此目的

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: " ";
  white-space: pre;
  width: 0;
}

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