将图像以 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;
}

Answer 2

保持你的HTML完整并使用下面的CSS类应该可以工作。

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

Answer 3

我认为这是使图像以圆为中心的最简单方法

.circletag{
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 50%;
    background-color: #fff;
    line-height: 100px;
    text-align: center;
} 
.circletag img{
    width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

Answer 4

写这个

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

和

这是div.circletag.img {}

像这样div.circletag img {}

Answer 5

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

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 6

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

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

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