centrar una imagen en un círculo css

Question

Ésta es una imagen en un círculo CSS. Quiero que el círculo rodee la imagen para que la imagen se encuentre en el centro. ¿Cómo puedo hacer eso?

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

usar la imagen como imagen de fondo.

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

Si no quiere tener todo el div exterior se pueda hacer clic, esto podría funcionar:

.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

escribir este

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

y

esto es div.circletag.img {}

como esto div.circletag img {}

Answer 3

No se ha podido probar rápidamente, pero siento que debe intentar algo como esto:

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

en el div redondeada, dar text-align:center y añadir padding-top. y también nota que si agrega relleno, debe recalcular la altura del div.

verificación de la demo aquí http://jsfiddle.net/fwQq4/

última cosa .. que no es necesario especificar display:block. solo use el bloque de visualización, si el elemento redondeado es span o anclaje.