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

Question

由于某种原因vertical-align: middleaspan不起作用。

.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

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

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

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

vertical-align内联元素也是如此。span是内联的。

为什么不起作用？

垂直对齐中间在跨度元素中不起作用

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

我的容器是柔性的。

怎么了？

Answer 1

根据您为该元素发布的MDN 定义span：

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

确实，元素display的默认值为。但这个值在弹性容器中被覆盖。spaninline

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

来自弹性盒规范：

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

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