JQuery Mobile图标偏离中图标按钮

Question

我想知道是否有人可以帮助我。在一个按钮中，我有一个自定义图标放在一个按钮（最终我将删除背景）但是，因为更改图标的大小，它现在偏离中心。谁能解释为什么会这样？

＆＃13;

＆＃13;

.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 {
	background-image: url("img/spot.svg");
    background-size: 100%;
    width: 60px;
    height: 60px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要覆盖：after伪元素的上边距和左边距。

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

  

<强> DEMO