2015-10-15 36 views
1

我想知道是否有人可以幫助我。在一個按鈕中,我有一個放置在按鈕中的自定義圖標(最終我將移除背景),但是由於更改圖標的大小,現在它偏離了中心。任何人都可以解釋爲什麼這是?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>

enter image description here

回答

0

你需要覆蓋的頂部和左側邊距:僞元素之後。

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

DEMO