How to have text in center and image around it as shown in screenshot? (Image attached) : <p>I am converting an Illustrator design into HTML and CSS using Bootstrap framework. I am stuck on the part of design shown below: </p>

<p><a href="https://i.stack.imgur.com/GlHjD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GlHjD.png" alt="Illustrator Design"></a></p>

<p>I want the text surrounded by image as shown above.I can have these images separately and also one single image as I can export these from Illustrator according to the requirements. I can also export SVG image if required.What would be the best approach to achieve this task.</p>
