将图像置于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

写这个

<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 4

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

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 5

在舍入的div处，给text-align:center并添加填充顶部。并且注意如果你添加填充 ，你必须重新计算div的高度 。

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

最后一件事......你不需要指定display:block。如果圆角元素是span或anchor，则仅使用显示块。

Answer 6

我认为这是使图像居中于圆圈内的最简单方法

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