在div下面添加居中文本而不将其放在同一个div中

Question

我有3个svg圈在一起由线连接，我需要在每个圆圈下面放一些长文本。文字必须与圆圈的中心对齐。

我该怎么做？

我不能将文本放在与圆圈相同的div中，因为div的边界框会扩展而线条不会连接到圆圈。

目前的结果：

理想的结果：

https://jsfiddle.net/b5truu2y/4/

.inline div {
  display: inline-block;
  margin: 0 -2px;
}

<div class="inline">
  <div>
    <svg width="105" height="105">
      <circle cy="52.5" cx="52.5" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
    </svg>
  </div>
  <div>
    <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>
    <svg width="105" height="105">
      <circle cy="52.5" cx="52.5" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
    </svg>
  </div>
  <div>
    <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>
    <svg width="105" height="105">
      <circle cy="52.5" cx="52.5" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
    </svg>
  </div>
</div>

<div class="inline">
  <div>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
  <div>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>

Answer 1

根据评论更新

如果您愿意使用CSS解决方案（而不是SVG），这是一种可行的方法。您可以根据需要更新圆和线的大小。

https://en.wikipedia.org/wiki/Reflection_%28computer_programming%29#C#

＆＃13;

＆＃13;

.box {
  display: flex;
  font-size: .875em;
}

.box>div {
  text-align: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.circle {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 5px solid #5A5A5A;
  position: relative;
}

.circle:after,
.circle:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  height: 5px;
  margin: auto;
  background: #5A5A5A;
}

.circle:before {
  left: -10000%;
  width: 10000%;
}

.circle:after {
  right: -10000%;
  width: 10000%;
}

.circle--first:before {
  display: none;
}

.circle--last:after {
  display: none;
}

＆＃13;

<div class="box">
  <div>
    <span class="circle circle--first"></span>
    <p>AAAA</p>
  </div>
  <div>
    <span class="circle"></span>
    <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
  </div>
  <div>
    <span class="circle circle--last"></span>
    <p>CCCCCCCCCCCCCCCCCCC</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一种简单的SVG方法。

.inline > div {
  display: inline-block;
  width: 33%;
  float: left;
}

.inline div div {
  padding: 0 1em;
  font-size: smaller;
  text-align: center;
}

<div class="inline">
    <div>
        <svg width="100%" height="105" viewBox="0 0 400 105">
            <circle cy="52.5" cx="200" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
            <line x1="250" y1="52.5" x2="1000" y2="52.5" stroke="#5A5A5A" stroke-width="5"></line>
        </svg>
        <div>AAAAAAAAAAAAAAAA</div>
    </div>
    <div>
        <svg width="100%" height="105" viewBox="0 0 400 105">
            <line x1="-1000" y1="52.5" x2="150" y2="52.5" stroke="#5A5A5A" stroke-width="5"></line>
            <circle cy="52.5" cx="200" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
            <line x1="250" y1="52.5" x2="1000" y2="52.5" stroke="#5A5A5A" stroke-width="5"></line>
        </svg>
        <div>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    </div>
    <div>
        <svg width="100%" height="105" viewBox="0 0 400 105">
            <line x1="-1000" y1="52.5" x2="150" y2="52.5" stroke="#5A5A5A" stroke-width="5"></line>
            <circle cy="52.5" cx="200" r="50" stroke="#5A5A5A" stroke-width="5" fill="transparent"></circle>
        </svg>
        <div>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
    </div>
</div>