Flex布局下两个带文本的span元素无法垂直对齐如何解决

使用Flex布局对齐两个包含文本的span元素时未实现预期对齐效果：浏览器开发者工具检查可见两个元素未对齐，右侧数字位置比左侧数字偏上，尝试设置vertical-align属性未生效。

<div class="slide-body">
  <div class="body-price">
    <span class="price">499000</span>
    <span class="price-off">45%</span>
  </div>
  <p class="main-price">900000</p>
</div>

.slide-body {
  display: flex; 
  flex-direction: column;
  gap: 10px;
}

.body-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: .5rem;
}

• vertical-align属性仅对行内元素、行内块元素、表格单元格元素生效，flex容器的直接子元素属于flex子项，会自动成为块级格式化上下文，该属性对其完全无效。
• 当前.body-price设置的align-items: center是按照flex子项的整体盒模型高度做居中对齐，没有对齐文本本身的视觉基线。如果两个span的字体大小、行高、上下内边距不一致，就会出现盒模型居中但文本视觉上高低错位的问题。

• 优先使用基线对齐：将.body-price的align-items属性值从center修改为baseline，该属性会强制所有flex子项内的第一行文本基线落在同一条水平线上，是数字类文本对齐的最优方案，修改后代码如下：

.body-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-inline: .5rem;
}

• 如果必须保留整体盒模型的垂直居中逻辑，需要统一两个span的行高、字体相关属性，消除子项盒模型的高度差，通常给文本类flex子项设置line-height: 1即可解决大部分视觉偏移问题：

.price, .price-off {
  line-height: 1;
}

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