将图像置于css圆圈中心

Question

这是CSS圈子中的图像.我希望圆圈围绕图像,因此图像应该位于中心.我怎样才能做到这一点？

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

使用图像作为背景图像.

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

如果您不希望整个外部div可以被点击,这可能会起作用:

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