1

I would need something like this

enter image description here

and i am using this 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>

The problem i am having is how to make the terms & info text under it center around the svg i have tried just putting it in a <p> tag under the svg but then the text doesn't care about the center of the SVG. i have tried solutions like these

Align text center below a SVG circle?

How to place and center text in an SVG rectangle

but those make it so only part of the text shows. The part that fits the SVG width and nothing more. Is there any easy way to make th text align itself after the SVG center?

Johan Jönsson
  • 539
  • 1
  • 10
  • 23

1 Answers1

4

Try using display: flex;. Hope this code helps

.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>
Stefan Joseph
  • 545
  • 2
  • 10