如何用HTML和CSS让单个数字对齐到下方两位数字的中间

原代码 #

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div>
  <p class='mb-2'>This is the title!</p>
  <div>
    <p><span>5</span> <i class='fa fa-sort-down'></i><span> = this is some text</span></p>
    <p><span>24</span> <i class='fa fa-sort-down'></i><span>  = this is another text over here</span></p>
    <p><span>31</span> <i class='fa fa-sort-down'></i><span> = the same</span></p>
  </div>
</div>

当前代码中数字5恰好位于24的数字2正上方，需要让5处于24的垂直中间位置。曾尝试为span设置display:flex，再设置align-items或align-self为center，但未生效，寻求可行解决方案。

解决方案 #

给包含数字的第一个span设置固定宽度并居中对齐，同时确保行内元素垂直对齐一致：

/* 数字容器样式：固定宽度+水平居中 */
p > span:first-child {
  display: inline-block;
  width: 2em; /* 根据字体大小调整，确保能容纳两位数 */
  text-align: center;
  vertical-align: middle;
}

/* 可选：让整行元素垂直居中对齐 */
p {
  display: flex;
  align-items: center;
  gap: 0.5em; /* 控制元素间的间距 */
}

原理说明 #

• 固定宽度的容器能让单个数字和两位数处于相同宽度的空间内，text-align:center让单个数字水平居中，自然对齐到两位数的中间位置。
• vertical-align:middle确保数字和图标、文本的垂直位置一致，避免错位。
• 之前单独给span设置flex未生效，是因为没有给容器足够的宽度空间，且缺少父元素的布局上下文支持垂直对齐。

内容的提问来源于stack exchange，提问作者Leo Messi