Html 将图像居中在 css 圆圈中

center an image in a css circle

提问by Chobeat

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?

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

HTML:

HTML：

<div class="circletag" id="nay">
    <img src="/images/no.png">
</div>

CSS:

CSS：

div.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
div.circletag.img {

}

回答by Zsolt Sch?fer

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

If you don't want to have the entire outer div to be clickable, this might work:

如果您不想让整个外部 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;
}

回答by Squirred

Keeping your HTMLintact and using below CSSclass should work.

保持HTML完整并使用下面的CSS课程应该可以。

HTML:

HTML：

<div class="circletag" id="nay">
    <img src="/images/no.png">
</div>

CSS:

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

回答by Sonal Khunt

write this

写这个

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

and

和

this is div.circletag.img {}

这是 div.circletag.img {}

like this div.circletag img {}

像这样 div.circletag img {}

回答by Lapple

Unable to test it quickly, but I feel you should try something like this:

无法快速测试，但我觉得你应该尝试这样的事情：

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

回答by Ariona Rian

at the rounded div, give text-align:centerand add padding-top. and also notethat if you add padding, you must recalculate the height of the div.

在圆形 div 处，给出text-align:center并添加 padding-top。还要注意，如果添加填充，则必须重新计算 div 的高度。

check the demo here http://jsfiddle.net/fwQq4/

在此处查看演示http://jsfiddle.net/fwQq4/

last-thing.. you don't need to specify display:block. only use display block, if the rounded element is span or anchor.

最后一件事.. 你不需要指定display:block. 如果圆形元素是跨度或锚点，则仅使用显示块。