Center image in css circle

Question

This is a CSS circle image. I want the circle to surround the image, so the image should be in the center. How can i do this?

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 { } 

Answer 1

Use the image as a 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 do not want the entire external div to be accessible to the client, 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; } 

Answer 2

write it

 <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 {}

Answer 3

It is not possible to test it quickly, but I feel that 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; } 

Answer 4

in a rounded div, give text-align:center and add padding-top. as well as note , so when adding indentation you have to recalculate the height of the div .

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

last-thing .. you do not need to specify display:block . use only the display unit if the rounded element has a range or snap.