如何实现span标签旁的文本与span内的价格内容垂直居中对齐

你现有代码存在两个核心问题：

• CSS选择器不匹配：HTML中周期文本的类属性为period，但你CSS中写的选择器是.monthly，样式完全没有生效
• 对齐规则不全：仅给周期文本设置了垂直对齐，价格元素没有设置对应的对齐规则，两个行内元素无法按预期对齐

方案1：直接修复现有代码 #

无需修改HTML，仅调整CSS即可生效：

.price {
  font-size: 50px;
  vertical-align: middle;
}
/* 选择器修改为和HTML类名匹配的.period */
.period {
  color: #d0d3d4;
  vertical-align: middle;
}

方案2：更优的Flex布局实现（推荐） #

Flex布局可以彻底避免行内元素基线对齐的像素偏差问题，后续调整间距、对齐方式都更灵活，CSS代码如下：

.deal {
  display: flex;
  align-items: center;
  /* 可自行调整两个文本之间的间距 */
  gap: 6px;
}
.price {
  font-size: 50px;
}
.period {
  color: #d0d3d4;
}

如果需要两个文本按文字基线对齐，把align-items: center改成align-items: baseline即可。

内容的提问来源于stack exchange，提问作者Đức Seven