Question

我有一个Font-Awesome炸弹图标，我想在图像上居中以覆盖中心的洞。然而，＆＃34;中心＆＃34;图标的位置靠近保险丝与炸弹相遇的位置，以使炸弹正确地覆盖我需要的中心孔＃34;炸弹的位置在炸弹的圆圈部分的中心。

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

我通常使用

解决这些问题

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

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

方法

它基本上是眼球，直到你击中甜蜜点。您也可以使用百分比。 translate的工作方式是百分比，它会查看您要添加属性的元素的尺寸。在这种情况下，您的元素正好是正方形（300px乘300px）。如果我们将值更改为：

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

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

http://jsfiddle.net/tgh9a6rw/

在您的情况下，图标的视觉中心在x和y轴上相对于技术中心的偏移量恰好为10％。如果你自己设计图标，你可以考虑到这一点，并用css完全保留眼球的过程。

Answer 2

您只需在left课程中添加top和fa职位：

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

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

Answer 3

我无法理解为什么你用flexbox制作它，但是你需要手动调整值：

看到它正在编辑这个编辑过的小提琴：

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 4

您可以将margin-top和margin-left添加到fa班级

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

将中心的图标置于中心位置

4 个答案:

方法