center an image in a css circle

Question

enter image description here

This is an image in a CSS circle. I want the circle to surround the image so the image is supposed to be in the center. How can i do that?

HTML:

<div class="circletag" id="nay">
    <img src="/images/no.png">
</div>

CSS:

div.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
div.circletag.img {

}

The second selector is wrong, it sould be `div.circletag img` or better `div.circletag > img`. — Alessandro Vendruscolo, Dec 12 '11 at 11:23

Zsolt Schäfer · Accepted Answer · 2011-12-12T11:40:31.010

Use the image as background image.

.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-image: url(no.png);
    background-position:50% 50%;
    background-repeat:no-repeat;    
}

If you don't want to have the entire outer div to be clickable, this might work:

.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;    
    text-align:center;
}

.circletag img{
    margin-top:7px;
}

And as Honneykeepa said, use just border-radius. – Zsolt Schäfer Dec 12 '11 at 11:43 — Zsolt Schäfer, Dec 12 '11 at 11:43

score 4 · Answer 2 · edited Jan 08 '19 at 02:00

4

Keeping your HTML intact and using below CSS class should work.

HTML:

<div class="circletag" id="nay">
    <img src="/images/no.png">
</div>

CSS:

div.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    text-align: center;
    align-content: center;
    align-items: center;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
div.circletag>img {
   max-height: 100%;
   max-width: 100%;
}

edited Jan 08 '19 at 02:00

Pritam Banerjee

17,953
10
93
108

answered Mar 30 '18 at 21:24

max-height: 100%; and max-width: 100%; works great in both Portrait and landscape-oriented images. thank you – Nader Jan 03 '20 at 20:48
I think adding `display: flex;` to circletag will make this work perfectly. – Ahmad Yousef Mar 08 '22 at 20:35

score 2 · Answer 3 · answered Oct 08 '20 at 19:48

I think this is the easiest way to make an image centered within a circle

.circletag{
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 50%;
    background-color: #fff;
    line-height: 100px;
    text-align: center;
} 
.circletag img{
    width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

Sonal Khunt · Answer 4 · 2011-12-12T11:35:31.320

0

write this

<div class="circletag" id="nay">
    <div style="padding-top: 7px;text-align: center;"><img src="/images/no.png"></div>
</div>

and

this is div.circletag.img {}

like this div.circletag img {}

edited Dec 12 '11 at 11:35

answered Dec 12 '11 at 11:17

Sonal Khunt

1,876
12
20

div.circletag.img{ padding:2px; } like this? – Chobeat Dec 12 '11 at 11:20
Like this: `div.circletag img{ padding:2px; }` – Rory McCrossan Dec 12 '11 at 11:20
i don't see how that would help – ptriek Dec 12 '11 at 11:27

score 0 · Answer 5 · answered Dec 12 '11 at 11:29

Unable to test it quickly, but I feel you should try something like this:

div.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    /* For now you can actually use
     * plain border-radius
     *
     * -moz-border-radius: 20px;
     * -webkit-border-radius: 20px;
     */
    border-radius: 20px;

    text-align: center;
}

div.circletag img {
    line-height: 40px;
}

score 0 · Answer 6 · answered Dec 12 '11 at 11:47

at the rounded div, give text-align:center and add padding-top. and also note that if you add padding, you must recalculate the height of the div.

check the demo here http://jsfiddle.net/fwQq4/

last-thing.. you don't need to specify display:block. only use display block, if the rounded element is span or anchor.

center an image in a css circle

6 Answers6

Linked