如何让span文本相对于主文本实现精确的垂直居中？

针对你价格卡片里span文本无法和主文本精确垂直居中的问题，下面提供几种可靠的解决方法，先修正你代码里的错误，再给出具体实现：

首先修正你的代码结构 #

你当前HTML的body部分错误地写了CSS代码，正确的结构应该是主文本（h1）包含span元素，比如：

<html>
<head>
  <style>
    h1{
      font-size:30px;
    }
    span{
      font-size:15px;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <!-- 正确的DOM结构：主价格 + 带删除线的原价 -->
  <h1>¥99 <span>¥199</span></h1>
</body>
</html>

方法1：使用vertical-align: middle（最直接） #

inline/inline-block元素默认是基线对齐，给span添加vertical-align: middle可以让它相对于主文本的中线精确居中：

h1{
  font-size:30px;
}
span{
  font-size:15px;
  text-decoration:line-through;
  vertical-align: middle;
}

方法2：用Flex布局实现（更灵活） #

把h1设置为flex容器，利用align-items: center让所有子元素垂直居中，这种方法适合后续需要调整布局的场景：

h1{
  font-size:30px;
  display: inline-flex; /* 保持行内特性，不独占一行 */
  align-items: center; /* 垂直居中子元素 */
  gap: 8px; /* 可选：给主文本和span之间加间距 */
}
span{
  font-size:15px;
  text-decoration:line-through;
}

方法3：调整line-height（适合简单场景） #

如果主文本的line-height设置合理，配合span的继承属性也能实现居中，但精度略逊于前两种：

h1{
  font-size:30px;
  line-height: 1.4; /* 根据字体调整合适的行高 */
}
span{
  font-size:15px;
  text-decoration:line-through;
  line-height: inherit;
  vertical-align: middle;
}

说明：你之前给span加的align-items和justify-content是flex容器的属性，作用在span本身无效，需要把这些属性加在父容器（h1）上。

内容的提问来源于stack exchange，提问作者Prabesh Shrestha