center an image in a css circle
Keeping your HTML
intact and using below CSS
class should work.
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%;
}
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:
.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;
}
I think this is the easiest way to make an image centered within a circle
.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%);
}