将图像居中在css圆中 [英] center an image in a css circle

问题描述

>

CSS圆形中的图像。我想要圆圈环绕图像，所以图像应该在中心。我该如何做？

This is an image in a CSS circle. I want the circle to surround the image so the image is supposed to be in the center. How can i do that?

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 {

}

推荐答案

使用图片作为背景图片。

Use the image as 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;    
}

如果您不想让整个外部div可点击，这可能工作：

If you don't want to have the entire outer div to be clickable, 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;
}

这篇关于将图像居中在css圆中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！