如何使用CSS在不移动居中文本的同时添加侧边文本？

Absolutely! This is totally achievable with CSS, and there are several clean approaches to get exactly the effect you’re looking for—where the core centered text stays perfectly aligned to the container’s center, regardless of the extra text added to its side.

方法1：绝对定位（最通用的方案） #

This method works great for dynamic content, as the side text is pulled out of the document flow so it never disrupts the centered text’s position.

HTML结构 #

<div class="centered-container">
  <span class="side-text">ss</span>
  <span class="main-text">C</span>
</div>

CSS样式 #

.centered-container {
  text-align: center; /* 确保主文本相对于容器居中 */
  position: relative; /* 为绝对定位的侧边文本提供定位参考 */
  /* 可选：添加容器样式模拟你的示例效果 */
  width: 200px;
  border: 1px dashed #ccc;
  margin: 10px auto;
}

.side-text {
  position: absolute;
  /* 将侧边文本定位到主文本的左侧，基于容器中心计算位置 */
  right: calc(50% + 0.4em); /* 0.4em 是单字符宽度的近似值，可根据字体调整 */
  /* 垂直对齐主文本 */
  top: 50%;
  transform: translateY(-50%);
}

This setup keeps .main-text perfectly centered in .centered-container, while .side-text sits snugly to its left without shifting it at all. You can adjust the right value or add a small margin-right to fine-tune spacing between the side and main text.

方法2：CSS Grid（适合结构化布局） #

If you prefer a modern layout approach, CSS Grid lets you create a centered "column" for your main text, with the side text occupying a narrow column beside it—all while keeping the main text anchored to the container’s center.

HTML结构 #

<div class="grid-container">
  <span class="side-text">s</span>
  <span class="main-text">CCC</span>
</div>

CSS样式 #

.grid-container {
  display: grid;
  /* 创建两列：第一列适配侧边文本宽度，第二列占剩余空间 */
  grid-template-columns: auto 1fr;
  /* 让整个网格内容在容器中居中 */
  justify-content: center;
  /* 可选容器样式 */
  width: 200px;
  border: 1px dashed #ccc;
  margin: 10px auto;
}

.main-text {
  grid-column: 2;
  text-align: center; /* 确保主文本在其网格项中居中 */
}

.side-text {
  grid-column: 1;
  justify-self: end; /* 让侧边文本靠右，紧贴主文本 */
  align-self: center; /* 垂直对齐主文本 */
  margin-right: 0.25em; /* 可选：添加间距 */
}

方法3：伪元素（适合固定侧边文本） #

If your side text is static (doesn’t change dynamically), you can use a CSS pseudo-element to avoid adding extra HTML markup.

HTML结构 #

<div class="main-with-side">C</div>

CSS样式 #

.main-with-side {
  text-align: center;
  position: relative;
  /* 可选容器样式 */
  width: 200px;
  border: 1px dashed #ccc;
  margin: 10px auto;
}

.main-with-side::before {
  content: "s"; /* 这里设置你的侧边文本 */
  position: absolute;
  right: calc(50% + 0.4em);
  top: 50%;
  transform: translateY(-50%);
}

对应你的示例效果 #

All three methods can produce the exact outputs you listed:

• +++++ sC +++++: Set .side-text to "s" and .main-text to "C"
• +++++ ssC +++++: Set .side-text to "ss" and .main-text to "C"
• +++++ sCCC +++++: Set .side-text to "s" and .main-text to "CCC"

Each approach ensures the main text stays locked to the container’s center, no matter how long the side text is.

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