我完全理解你的需求：要让价格整体在单元格里水平居中，但又要保持数字的小数点/货币符号上下对齐，就像右对齐时那样整齐。下面给你两个实用的解决方案：

方案1：Flex布局（无需修改HTML结构） #

这是最简洁的方法，利用CSS Flex布局实现双重对齐：

table td { 
  width: 200px; 
  /* 让单元格成为flex容器 */
  display: flex;
  /* 让内容整体在单元格水平居中 */
  justify-content: center;
  /* 垂直居中（可选，让内容在单元格垂直方向也居中） */
  align-items: center;
  border:1px solid red;
}
/* 让单元格内的文本右对齐，实现数字上下对齐 */
table td {
  text-align: right;
}

你的HTML可以保持原样，不需要任何修改。这个方法的原理是：Flex的justify-content: center会把文本块整体放在单元格中间，而text-align: right让文本块内部的数字向右对齐，自然就实现了整体居中+数字上下对齐的效果。

方案2：嵌套内联块元素（直观易调整） #

如果需要更精细的控制数字块的宽度，可以在td里嵌套一个span元素：

修改后的HTML： #

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

对应的CSS： #

table td { 
  width: 200px; 
  text-align: center; 
  border:1px solid red;
}
table td span {
  display: inline-block;
  /* 让span内的文本右对齐，实现数字对齐 */
  text-align: right;
  /* 设置最小宽度，确保所有span宽度一致，避免内容长短导致位置偏移 */
  min-width: 120px;
}

这个方法的好处是可以通过调整min-width来控制数字块的宽度，让对齐效果更精准。

两种方法都能完美实现你想要的效果，你可以根据自己的实际场景选择~

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