css - SVG 下方的居中文本

Question

我需要这样的东西

我正在使用这个 svg

<svg viewBox="0 0 26 26" id="terms" className="terms-svg">
        <path id="Path_349" data-name="Path 349" className="info-icon" d="M13,0A13,13,0,1,0,26,13,13,13,0,0,0,13,0Zm2.024,21.812H10.962V8.756h4.062ZM12.972,7.154A1.986,1.986,0,0,1,10.864,5.13,1.978,1.978,0,0,1,13,3.078a2.042,2.042,0,1,1-.028,4.076Z"/>
    </svg>

我遇到的问题是如何使它下面的条款和信息文本以我试过的 svg 为中心，只是将它放在 <p> 中标记在 svg 下，但文本不关心 SVG 的中心。我已经尝试过这样的解决方案

Align text center below a SVG circle?

How to place and center text in an SVG rectangle

但那些使它只显示部分文本。适合 SVG 宽度的部分，仅此而已。有什么简单的方法可以使文本在 SVG 中心之后自行对齐吗？

Answer 1

尝试使用 display: flex;。希望这段代码有帮助

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.align-items-center {
      align-items: center;
}

<div class="d-flex flex-column align-items-center">
  <svg viewBox="0 0 26 26" id="terms" className="terms-svg">
        <path id="Path_349" data-name="Path 349" className="info-icon" d="M13,0A13,13,0,1,0,26,13,13,13,0,0,0,13,0Zm2.024,21.812H10.962V8.756h4.062ZM12.972,7.154A1.986,1.986,0,0,1,10.864,5.13,1.978,1.978,0,0,1,13,3.078a2.042,2.042,0,1,1-.028,4.076Z"/>
    </svg>
  <p>
    Terms & Info
  </p>
</div>