centrare un'immagine in un cerchio css

Question

Questa è l'immagine in un cerchio CSS. Voglio che il cerchio circondi l'immagine in modo che l'immagine debba essere al centro. Come lo posso fare?

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

utilizzare l'immagine come immagine di sfondo.

.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;  
} 

Se non si desidera avere l'intero div esterno di essere cliccabile, questo potrebbe funzionare:

.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

scrittura questo

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

e

questo è div.circletag.img {}

come questo div.circletag img {}

Answer 3

Unable to test in fretta, ma mi sento si dovrebbe provare qualcosa di simile:

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

al div arrotondato, dare text-align:center e aggiungere padding-top. e anche nota che se si aggiunge padding, è necessario ricalcolare l'altezza del div.

controllo la demo qui http://jsfiddle.net/fwQq4/

ultima-cosa .. non è necessario specificare display:block. usa solo il blocco di visualizzazione, se l'elemento arrotondato è span o ancora.