如何获得一个flex项目来参与基线对齐和居中？

Question

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

一个典型的例子如下：

​

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容器的内联轴与其主轴匹配时，其基线确定如下：

1. 如果flex容器的最开始/最末端的flex线上的任何一个flex项参与基线对齐，那么flex容器的第一个/最后一个主轴基线集是从这些flex项的共享对齐基线中生成的。
2. 否则，如果flex容器至少有一个flex项，那么flex容器的第一个/最后一个主轴基线集是从最开始/最末端的弯曲项的对齐基线生成的。(如果该项目没有与flex容器的主轴平行的对齐基线，那么首先从其边界边缘合成一个。)
3. 否则，flex容器没有第一/最后一条主轴基线集，如果需要，根据其对齐上下文的规则进行合成。

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

最开始的弯曲项是图像，因此根据规则2，基线将从底部边界合成。

在周围交换文本和图像显示了有一个不同的最开始的灵活项目的效果：

​

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; line-height: 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>

​

虽然基线是现在，垂直对中有点问题，需要高度匹配，这是不太理想的。

是否有任何其他的方法来获得一个柔韧的项目参与基线对齐，同时仍然通过中心对齐？

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>

​