Tengo un icono de bomba Font-Awesome que quiero centrar sobre una imagen para cubrir el agujero en el centro. Sin embargo, el "centro" del icono está cerca de donde el fusible se encuentra con la bomba, para que la bomba cubra adecuadamente el agujero, necesito que el "centro" de la bomba esté en el centro de la parte circular de la bomba.

http://jsfiddle.net/vhogkv3c/

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

¿Hay alguna manera de lograr esto? Intenté usar márgenes negativos fijos, pero no parecía ser la mejor manera.

1
DasBeasto 5 ene. 2017 a las 14:29

4 respuestas

La mejor respuesta

Usualmente resuelvo estos problemas usando

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

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

Método

Básicamente es llamativo hasta que hayas alcanzado el punto óptimo. También podrías usar porcentajes. La forma en que traducir funciona con porcentajes es que analiza las dimensiones del elemento al que está agregando la propiedad. En este caso, su elemento es exactamente cuadrado (300 px por 300 px). Si cambiamos el valor a:

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

Haría prácticamente lo mismo que el código anterior, pero se escalará en consecuencia. Intente cambiar el tamaño de fuente en este segundo jsfiddle:

http://jsfiddle.net/tgh9a6rw/

En su caso, el centro visual del icono tiene un desplazamiento de exactamente el 10% tanto en el eje x como en el eje relativo al centro técnico. Si está diseñando el ícono usted mismo, puede tener esto en cuenta y ahorrarse el proceso visual con css por completo.

4
duvigneau 5 ene. 2017 a las 14:12

No puedo entender por qué hiciste esto con flexbox, pero necesitas ajustar los valores manualmente:

Véalo trabajando en este violín editado:

Solo cambio la primera regla:

.fa{
    font-size:300px;
    z-index:99;
    position: relative;
    /* these two are new: */
    margin-top:-60px;
    margin-left:60px;
}
1
Marcos Pérez Gude 5 ene. 2017 a las 11:33

Puedes agregar margin-top y margin-left a tu clase fa

fa{
  font-size:300px;
  z-index:99;
  position: relative;
  margin-top: -60px;
  margin-left: -65px;
}
1
Laravel14 5 ene. 2017 a las 11:42

Simplemente puede agregar una posición left y top a la clase fa:

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

Sin embargo, es probable que desee hacerlo más específico agregando una clase específica, porque este código cambia el icono de fuente every .

1
seemly 5 ene. 2017 a las 13:25