如何在水平居中的<td>单元格内让金额数字按分隔符上下对齐

我们可以通过嵌套行内块容器的方式实现需求，核心逻辑是把金额内容放在一个独立的行内块容器中，容器内部右对齐保证数字对齐，容器本身在单元格内居中即可，不需要修改原有text-align: center的设置。

第一步：修改HTML结构 #

给每个<td>内的金额内容套一层自定义类名的<span>标签：

<table>
  <thead>
      <tr>
          <th>Price</th>
      </tr>
  </thead>
  <tbody>
    <tr>
        <td class="red"><span class="price-item">$ 11.122,00</span></td>
    </tr>
    <tr>
        <td class="red"><span class="price-item">$ 11.1,00</span></td>
    </tr>
    <tr>
        <td class="red"><span class="price-item">$ 11.122,00232</span></td>
    </tr>
    <tr>
        <td class="red"><span class="price-item">$ 11.122,00</span></td>
    </tr>
  </tbody>
</table>

第二步：新增对应CSS样式 #

给新增的.price-item添加如下样式，原有CSS不需要改动：

.price-item {
  /* 设为行内块元素，既可以设置宽度，又能随文本流居中 */
  display: inline-block;
  /* 最小宽度设为能容纳最长金额的数值即可，可根据实际情况调整 */
  min-width: 120px;
  /* 容器内部右对齐，保证所有数字的千分符、小数点上下对齐 */
  text-align: right;
}

实现原理 #

• 单元格保留text-align: center属性，会让作为行内块的.price-item整体在单元格内水平居中，满足内容整体居中的要求
• .price-item内部右对齐，所有长度不同的金额都会靠容器右侧对齐，自然实现千分符、小数点的上下对齐效果
• 不需要修改原有布局逻辑，适配性强，最小宽度可以根据实际业务里最长的金额长度灵活调整

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