How to center an image inside a circle

Question

Can someone help and tell me how I can center an image inside the circle as show in the image below.

Before writing this post I spend some time looking for an answer but I could not find out how.

Here is the only code i have, this is HTML:

<div class="service">
    <div class="circle">      
      <!-- <img src="/assets/images/engineering.png" alt="image mécanisme"> -->
      </div>
     <h2>Automatiser votre<br>funnel d'acquisition</h2>
</div>

Now add the css too, so that we can know where the issue begins — KasRoudra, Apr 30 '22 at 16:31
How about putting the image is as a background-image to the element positioned center and size contain for example? — A Haworth, Apr 30 '22 at 16:53

score 2 · Accepted Answer · answered Apr 30 '22 at 16:46

Using HTML, position the image inside the parent div (which is the circle div).

In the parent div (with class circle), using CSS add

.circle { display: flex; align-items: center; justify-content: center}

This should add the image into the circle div.

Please mark this as correct if it's helpful.

How to center an image inside a circle

1 Answers1