png icon with circle border - CSS

user_4339640 0
Viewed 5979

I've got a PNG image icon with un-even sides (64px x 42px) and I'd like to create a circle border around it.

My html looks like this:

<span class="cat_circle">
     <div class="cat_icon">
       <img src="https://cdn.pbrd.co/images/GNK97WG.png">
     </div>
</span>

I created a circle border around the image, but I just can't get the icon to the exact middle of the circle. The icon sits on the bottom right of the circle.

Here is my CSS for the circle border:

.cat_circle {
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 25px;
height: 25px;
overflow: hidden;
position: absolute;
padding: 30px;  
left: 10px;
top: 10px;
text-align: center;
vertical-align: middle;
}

I then started fiddling with the actual png image and I gave it negative margins like this: 

.cat_icon {
margin-top: -10px;
margin-left: -18px;   
}

I mean it seems to work and I have my icon in the middle of the circle, but is this the right way I should be approaching this??

Here is my fiddle: https://jsfiddle.net/ox0anvL7/

css html
4 Answers

You can do that a lot simpler. I added three flexbox properties for the centering, but erased one HTML wrapper and quite a few of the (too complicated) CSS settings:

.cat_circle {
  border: 3px solid #7E9CC2;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cat_circle img {
  width: 80%;
  height: auto;
}
<span class="cat_circle">
       <img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>

user_56416690

This is a pretty good way to do it. This works for all cases too when trying to center something inside a div.

It can be better than using flex as I believe that flex is only available in versions of IE 10 onwards (source here).

.cat_circle {
  position: absolute;
  display: inline-block;
  border: 3px solid #7E9CC2;
  border-radius: 50%;
  width: 70px;
  height: 70px;
}
.cat_circle img {
  position: absolute;
  top: 50%; left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
}
<span class="cat_circle">
       <img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>

user_37223300

I'd suggest flexbox, simplifies and reduces the need of another class.

.cat_circle {
  border: 3px solid #7E9CC2;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  overflow: hidden;
  position: absolute;
  padding: 30px;
  left: 10px;
  top: 10px;
  /* new */
  display: flex;
  justify-content: center;
  align-items: center;
}
<span class="cat_circle">
  <img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>

user_45372970

You Can Try this way !!

<div class="image-circle">
  <div>
    <img class="img" src="https://cdn.pbrd.co/images/GNK97WG.png">
  </div>
</div>

.image-circle {
    width:25%;
}
.image-circle:after {
    content: "";
    background: #4679BD; 
    padding-bottom: 100%;
    border-radius: 50%;
    display: block;
    width: 100%;
    height:0;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%;    
}
.image-circle div {
    float:left;
    width:100%;    
    line-height:1em;
    margin-top:-0.5em;
    padding-top:40%;
    text-align:center;    
}
user_82108480
Related