Центр текста под 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.я пробовал решения, подобные этим

Выровнять текстовый центр под кружком SVG?

Как разместить и отцентрировать текст в прямоугольнике SVG

но те делают это так, только часть текста показывает.Часть, которая соответствует ширине 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>