在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

写这个

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

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

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 4

在圆格，给text-align:center和添加填充顶。并且还注意，如果您添加填充，您必须重新计算div的高度。

检查这里的演示http://jsfiddle.net/fwQq4/

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