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，我曾尝试将其放在svg下的<p>标记中，但随后的文本不在乎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>