将原点的图标居中不在中心

Question

我有一个 Font-Awesome 炸弹图标，我想将其置于图像的中心以覆盖中心的孔。然而，图标的 "center" 靠近引信与炸弹相遇的地方，为了让炸弹正确覆盖孔，我需要炸弹的 "center" 位于圆圈部分的中心炸弹。

HTML:

<div class="wrapper">
    <i class="fa fa-bomb"></i>
    <img src="http://i.imgur.com/tF3stnX.jpg" />
</div>

CSS:

.fa{
    font-size:300px;
    z-index:99;
    position: relative;
}
img{
    width:400px;
    position: absolute;
    left:0;
    top:0;
}
.wrapper{
    display: flex;
    align-items: center;
    justify-content:center;
    width:400px;
    height:400px;
    background: #fff;
    position:relative;
}

有没有办法做到这一点？我试过使用固定的负边距，但这似乎不是最好的方法。

Answer 1

您可以将 left 和 top 位置添加到 fa class:

.fa {
   position: relative;
   left: 25px;
   top: -10px;
   z-index: 99;
   font-size: 300px;
 }

您可能希望通过添加特定的 class 使其更具体，因为此代码会更改 every 字体真棒图标。

Answer 2

我不明白你为什么用 flexbox 做这个，但你需要手动调整值：

看到它正在处理这个编辑过的 fiddle:

http://jsfiddle.net/vhogkv3c/1/

我只更改第一条规则：

.fa{
    font-size:300px;
    z-index:99;
    position: relative;
    /* these two are new: */
    margin-top:-60px;
    margin-left:60px;
}

Answer 3

我通常使用

解决这些问题

transform: translateX(30px) translateY(-30px);

http://jsfiddle.net/vhogkv3c/2/

方法

在您击中最佳位置之前，基本上是在观察。您也可以使用百分比。 translate 使用百分比的方式是查看要添加属性的元素的尺寸。在这种情况下，您的元素正好是正方形（300 像素 x 300 像素）。如果我们将值更改为：

transform: translateX(10%) translateY(-10%);

它的作用与上述代码几乎相同，但会相应地缩放。尝试在第二个 jsfiddle 中更改字体大小：

http://jsfiddle.net/tgh9a6rw/

在您的情况下，图标的视觉中心相对于技术中心在 x 轴和 y 轴上的偏移正好为 10%。如果您自己设计图标，您可以考虑到这一点，并用 css 来节省自己的眼球过程。

Answer 4

您可以将 margin-top 和 margin-left 添加到您的 fa class

fa{
  font-size:300px;
  z-index:99;
  position: relative;
  margin-top: -60px;
  margin-left: -65px;
}

将原点的图标居中不在中心

Centering an icon that's origin isn't in the center

css

centering

方法