在 SVG 下方居中文本答案

【问题标题】：Center text below an SVG在 SVG 下方居中文本
【发布时间】：2019-11-07 01:18:09
【问题描述】：

我需要这样的东西

我正在使用这个 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 为中心，我尝试将其放在 svg 下的 <p> 标记中，但文本并不关心SVG。我已经尝试过这样的解决方案

Align text center below a SVG circle?

How to place and center text in an SVG rectangle

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

【问题讨论】：

标签： css svg

【解决方案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>

【讨论】：