JQuery移动图标偏离中心图标专用按钮

我想知道是否有人可以帮助我。在一个按钮中，我有一个放置在按钮中的自定义图标（最终我将移除背景），但是由于更改图标的大小，现在它偏离了中心。任何人都可以解释为什么这是？JQuery移动图标偏离中心图标专用按钮

.spot { 
 
    position: absolute; 
 
    /* 
 
    background-color: transparent !important; 
 
    border: 0 !important; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    */ 
 
    height: 140px; 
 
    width: 140px; 
 
} 
 

 
.image-holder { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    position:absolute; 
 
} 
 

 
.spot:after { 
 
\t background-image: url("img/spot.svg"); 
 
    background-size: 100%; 
 
    width: 60px; 
 
    height: 60px; 
 
}

<div class="spot-holder"> 
 
    <a href="#ashcloud" 
 
    data-rel="popup" 
 
    class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all" 
 
    data-transition="flip" 
 
    style="top: 50px; left: 250px;"></a> 
 
    <div data-role="popup" id="ashcloud"> 
 
    <p>ASH CLOUD</p> 
 
    </div> 
 
</div>

来源

2015-10-15 RealFighter64

你需要覆盖的顶部和左侧边距：伪元素之后。

.spot:after { 
    background-image: url("img/spot.svg"); 
    background-size: 100%; 
    width: 60px; 
    height: 60px; 
    margin-top: -30px; 
    margin-left: -30px; 
}

DEMO

来源

2015-10-15 18:25:45 ezanker

JQuery移动图标偏离中心图标专用按钮

回答

相关问题