Question

我有一个非均匀边（64像素x 42像素）的PNG图像图标，我想在它周围创建一个圆形边框。

我的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;   
}

我的意思是它似乎工作了，我的圆圈中间有我的图标，但这是我应该接近这个的正确方法吗？

这是我的小提琴：https://jsfiddle.net/ox0anvL7/

Answer 1

这是一个非常好的方法。当尝试将某个内容放在div中时，这也适用于所有情况。

它可能比使用flex更好，因为我相信flex仅适用于IE 10以上版本（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>

Answer 2

你可以做得更简单。我为居中添加了三个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>

Answer 3

我建议使用flexbox，简化并减少对另一个类的需求。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

你可以尝试这种方式!!

> dim(rawCountTable)
[1] 94003    24
> dim(gene.description)
[1] 61125     2

带圆圈边框的png图标 - CSS

4 个答案: