如何在不改变TD内居中字符串位置的前提下，在其左右添加字符？

要实现不改变原文本居中位置、在其左侧/右侧添加字符的需求，可以通过相对定位+绝对定位的组合来实现，无需计算固定像素值：

核心思路 #

1. 给承载目标文本的.centeredRegardless设置相对定位，让它成为附加字符的定位参照
2. 给附加字符的类设置绝对定位，让它脱离文档流（不会影响原文本的居中布局）
3. 通过right: 100%或left: 100%将字符精准对齐到目标文本的左侧或右侧，再用margin调整字符与文本的间距

CSS 代码定义 #

.centeredRegardless {
  position: relative;
}

/* 用于在目标文本左侧添加字符的类 */
.onTheLeftWithoutAffectingThePreviousOne {
  position: absolute;
  right: 100%;
  margin-right: 4px; /* 可根据需要调整字符与文本的间距 */
}

/* （可选）用于在目标文本右侧添加字符的类 */
.onTheRightWithoutAffectingThePreviousOne {
  position: absolute;
  left: 100%;
  margin-left: 4px; /* 可根据需要调整字符与文本的间距 */
}

完整使用示例 #

<table>
  <tr>
    <td style='text-align:center'>
      <span class='centeredRegardless'>CENTERED</span>
      <span class='onTheLeftWithoutAffectingThePreviousOne'>*</span>
    </td>    
  </tr>
  <!-- 右侧添加字符的示例 -->
  <tr>
    <td style='text-align:center'>
      <span class='centeredRegardless'>任意长度的动态文本</span>
      <span class='onTheRightWithoutAffectingThePreviousOne'>!</span>
    </td>    
  </tr>
</table>

方案优势 #

• 完全适配动态文本：不管目标文本长度如何变化，附加字符都会自动对齐到正确位置，无需手动调整
• 不破坏原布局：绝对定位的字符不占用文档流空间，原文本的居中状态不受任何影响
• 灵活可调：通过margin就能轻松调整字符与文本的间距，满足不同视觉需求

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