如何使用HTML/CSS实现两行左右错位带少量重叠的居中文字效果

实现方案 #

可以通过相对定位+文本对齐属性快速实现该效果，无需复杂布局，完整代码如下：

HTML 结构

<div class="text-wrapper">
  <p class="upper-text">上半部分的文字内容，左对齐排列</p>
  <p class="lower-text">下半部分的文字内容，右对齐排列</p>
</div>

CSS 样式

/* 外层容器，控制整体宽度+整体居中 */
.text-wrapper {
  width: 450px; /* 可根据实际需求调整宽度，移动端可改为max-width: 90vw做适配 */
  margin: 0 auto;
  position: relative;
}

/* 上半层文字：左对齐 */
.upper-text {
  margin: 0;
  text-align: left;
  font-size: 36px; /* 字号可自定义修改 */
  font-weight: bold;
}

/* 下半层文字：右对齐+向上偏移形成重叠 */
.lower-text {
  margin: 0;
  text-align: right;
  font-size: 36px; /* 字号可自定义修改，可和上层文字设置不同字号 */
  font-weight: bold;
  position: relative;
  top: -12px; /* 负值越大，两层文字重叠程度越高，可按需调整 */
  color: #555; /* 可设置不同颜色区分两层文字，不需要可删除该行 */
}

参数调整说明

• 调整重叠幅度：修改.lower-text的top属性数值即可，数值越大重叠越多
• 调整整体排版宽度：修改.text-wrapper的宽度属性即可
• 两层文字的字号、字重、颜色均可单独调整，不影响排版逻辑

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