centre une image dans un cercle css

C'est une image en CSS cercle. Je veux le cercle d'entourer l'image pour que l'image est censée être dans le centre. Comment puis-je le faire?

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 {

}

align='center' ... avez-vous l'essayer?
Le deuxième sélecteur est faux, il doit être div.circletag img ou mieux div.circletag > img.

OriginalL'auteur Chobeat | 2011-12-12

css html

Utiliser l'image comme image d'arrière-plan.

.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 vous ne voulez pas avoir l'ensemble de la div extérieure pour être cliquable, cela peut fonctionner:

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

Et comme Honneykeepa dit, juste utiliser border-radius.

OriginalL'auteur Zsolt Schäfer

Garder votre HTML intacte et l'aide ci-dessous CSS classe devrait fonctionner.

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

alignement-auto sur ...>img style pourrait trop de travail...

OriginalL'auteur Squirred

Pas pu le tester rapidement, mais je pense que vous devriez essayer quelque chose comme ceci:

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

OriginalL'auteur Lapple

0

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

c'est
div.circletag.img {}

comme ceci
div.circletag img {}

div.circletag.img{ padding:2px; } comme ceci?
Comme ceci: div.circletag img{ padding:2px; }
je ne vois pas comment cela pourrait aider

OriginalL'auteur Sonal Khunt
0

à l'arrondi de la div, donner text-align:center et ajouter un padding-top. et aussi note que si vous ajoutez un rembourrage, vous devez recalculer la hauteur de la div.

vérifier la démo ici http://jsfiddle.net/fwQq4/

dernière chose.. vous n'avez pas besoin de spécifier display:block. utilisez uniquement l'affichage de bloc, si l'arrondi élément est la durée d'ancrage.

OriginalL'auteur Ariona Rian

Vous devez vous connecter pour publier un commentaire.