求助：如何实现两个span标签内文本的垂直居中对齐？

问题根源 #

你使用的vertical-align: center是无效的CSS取值，vertical-align属性没有center这个选项，这是导致对齐失败的核心原因。另外你的HTML代码里第二个<span>标签未闭合，需要修正为</span>。

方案一：修正vertical-align用法 #

给两个<span>都设置vertical-align: middle，就能实现垂直居中对齐。同时可以给.per设置你需要的字号：

.per {
  color: hsl(71, 73%, 54%);
  vertical-align: middle;
  font-size: 12pt; /* 自定义你需要的字号 */
}

.whiteMoney {
  color: red;
  font-size: 20pt;
  font-weight: 700;
  vertical-align: middle; /* 替换无效的center为middle */
}

修正后的HTML：

<p>
  <span class="whiteMoney">$29</span>
  <span class="per">per month</span>
</p>

方案二：使用Flex布局（推荐） #

给父元素<p>设置Flex布局，通过align-items: center实现内部元素垂直居中，这种方式代码更简洁，还能方便控制元素间距：

.price-wrap {
  display: flex;
  align-items: center;
  gap: 6px; /* 可选，控制两个span之间的间距 */
}

.per {
  color: hsl(71, 73%, 54%);
  font-size: 12pt;
}

.whiteMoney {
  color: red;
  font-size: 20pt;
  font-weight: 700;
}

对应的HTML：

<p class="price-wrap">
  <span class="whiteMoney">$29</span>
  <span class="per">per month</span>
</p>

内容的提问来源于stack exchange，提问作者Barbara Clarke