html - 带有圆形边框的png图标-CSS

Question

我有一个 PNG 图像图标，它的边不是偶数 (64px x 42px)，我想在它周围创建一个圆形边框。

我的 html 看起来像这样:

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

我在图像周围创建了一个圆圈边框，但我就是无法将图标放在圆圈的正中间。该图标位于圆圈的右下角。

这是我的圆形边框的 CSS:

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

然后我开始摆弄实际的 png 图像，我给它这样的负边距:

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

我的意思是它似乎有效，我的图标位于圆圈中间，但这是我处理这个问题的正确方法吗？？

这是我的 fiddle :https://jsfiddle.net/ox0anvL7/

Answer 1

你可以更简单地做到这一点。我为居中添加了三个 flexbox 属性，但删除了一个 HTML 包装器和相当多的(太复杂的)CSS 设置:

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