How to center an image inside a circle

Question

I need the help of the community.

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

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

It would be so nice if someone can help me.

Here is the only coee 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>

The problem is that I have nothing. I tried many things but nothin work and it's not a clean code — Mohamed Necib, Apr 30 '22 at 16:28
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 1 · 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