如何使用html和css将一位数字对齐到以下两位数字的中间

Question

有以下代码片段：

<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正是上面的2。它必须在上面24，就像在中间，在它们之间。

我尝试将显示柔性添加到跨度，然后aling-items或aling-self并将其设置为center但没有工作。

有什么建议

Answer 1

这是一个表格布局，您不需要固定宽度：

.table {
  display: table;
}
.table p {
  display: table-row;
}
.table p span:first-child {
  display: table-cell;
  text-align: center;
  padding: 0 5px;
}

<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 class="table">
  <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>
  <p><span>999</span> <i class='fa fa-sort-down'></i><span> = the same</span></p>
</div>
</div>