如何为连线SVG圆圈添加下方居中文本且不放入同一DIV？

我懂你这个困扰——既要让长文本精准对应到每个圆圈下方居中，又不能因为文本撑开容器导致线条和圆圈的连接错位对吧？下面给你两种可行的方案，都能完美解决问题：

方案一：整合结构用Grid布局（推荐） #

这个方案把每个圆圈和对应的文本放在同一个容器里，用Grid控制整体排列，既清晰又灵活：

HTML 修改后： #

<div class="circle-wrapper">
  <!-- 第一个圆圈+文本 -->
  <div class="circle-group">
    <svg width="105" height="105">
      <circle cy="52.5" cx="52.5" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
    </svg>
    <p class="circle-label">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
  </div>

  <!-- 第一条连接线 -->
  <div class="line-group">
    <svg width="400" height="105">
      <line x1="0" y1="52.5" x2="400" y2="52.5" stroke="#5A5A5A" stroke-width="5"></line>
    </svg>
  </div>

  <!-- 第二个圆圈+文本 -->
  <div class="circle-group">
    <svg width="105" height="105">
      <circle cy="52.5" cx="52.5" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
    </svg>
    <p class="circle-label">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
  </div>

  <!-- 第二条连接线 -->
  <div class="line-group">
    <svg width="400" height="105">
      <line x1="0" y1="52.5" x2="400" y2="52.5" stroke="#5A5A5A" stroke-width="5"></line>
    </svg>
  </div>

  <!-- 第三个圆圈+文本 -->
  <div class="circle-group">
    <svg width="105" height="105">
      <circle cy="52.5" cx="52.5" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
    </svg>
    <p class="circle-label">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
  </div>
</div>

CSS 样式： #

.circle-wrapper {
  display: grid;
  /* 定义网格列：圆圈容器自动宽度，线条容器占剩余空间 */
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: start; /* 让所有网格项顶部对齐，避免线条位置偏移 */
}

.circle-group {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让圆圈和文本都居中 */
}

.circle-label {
  text-align: center;
  margin: 8px 0 0 0; /* 调整文本和圆圈的间距，按需修改 */
}

.line-group {
  display: flex;
  align-items: center; /* 让线条垂直居中，刚好和圆圈中心对齐 */
}

方案二：保持原有双容器结构，用网格对齐 #

如果你不想修改原有HTML结构，也可以给两个.inline容器设置完全一致的网格布局，让文本和圆圈一一对应：

CSS 修改后： #

.inline {
  display: grid;
  /* 严格对应SVG的宽度：圆圈SVG宽105px，线条SVG宽400px */
  grid-template-columns: 105px 400px 105px 400px 105px;
  margin-bottom: 8px;
}

/* 第一个容器里的圆圈保持原有样式 */
.inline:first-child div {
  display: inline-block;
  margin: 0 -2px;
}

/* 第二个容器里的文本居中对齐 */
.inline:last-child div {
  text-align: center;
}

为什么这两种方案都有效？ #

• 方案一通过Grid把整体拆分为“圆圈-线条-圆圈”的列布局，每个圆圈组内部用Flex垂直排列，文本自然居中，同时线条组单独控制垂直居中，完全不受文本高度影响。
• 方案二让两个容器的列宽完全匹配，文本容器的每个单元格和圆圈容器的单元格一一对应，实现精准对齐，而且文本在独立容器里，不会改变圆圈容器的边界盒。

你可以根据自己的需求选一种，亲测都能达到你想要的效果~

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