垂直对齐不适用于 flexbox 容器中的跨度

Question

由于某种原因，vertical-align: middle 上的 span 不起作用。

.tc__timezone-toggle {
  display: flex;
}

.tc__timezone-toggle span {
  vertical-align: middle;
}

.tc__timezone-toggle-ui {
  display: block;
  font-weight: 700;
  color: var(--tc-blue) !important;
  background-color: #E3E3E3;
  padding: 10px;
}

a.tc__timezone-toggle-ui {
  border-radius: 22px 0px 0px 22px;
}

.tc__timezone-toggle-ui:last-child {
  border-radius: 0px 22px 22px 0px;
}

<div class="tc__timezone-toggle">
  <span>TimeZone</span>
  <a class="tc__timezone-toggle-ui" href="#">PT</a>
  <a class="tc__timezone-toggle-ui" href="#">ET</a>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

vertical-align CSS 属性设置内联、内联块或表格单元框的垂直对齐方式。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

span HTML 元素是一个通用的内联容器，用于表达内容，它本身并不代表任何东西。

所以vertical-align 用于内联元素。 span 是内联的。

为什么它不起作用？

Vertical align middle not working in span element

您可以使用display: flex 来实现此目的。

我的容器是弹性的。

怎么了？

Answer 1

根据您为span 元素发布的MDN definition：

span HTML 元素是用于表达内容的通用内联容器，它本身并不代表任何内容。

没错，span 元素的默认 display 值为 inline。但是这个值在弹性容器中被覆盖了。

flex 容器的所有子元素，无论其元素类型如何，都被视为块元素。

来自flexbox spec：

弹性项目的display 值被阻塞：如果生成弹性容器的元素的流入子元素的指定display 是内联级值，则它计算为其块级等效值。

因此，vertical-align 将无法在 span 或任何其他“内联”元素上工作，一旦它们成为弹性项目。请改用 flex 对齐属性。