如何在具有動態高度的按鈕中放置前景圖像？

Question

我試圖在按鈕上創建一個前景圖像。 我已經準備的東西：

button:hover .remove-me { 
 
    opacity: 1; 
 
} 
 
.remove-me { 
 
    opacity: 0.5; 
 
    display: table-cell; 
 
    position: absolute; 
 
    width: 64px; 
 
    height: 64px; 
 
}

<button class="input-image remove-me-container focus" data-btid="3" id="imagepicker_1412162517704"> 
 
    <img class="remove-me" src="http://cdn.flaticon.com/png/64/7909.png" /> 
 
    <img draggable="false" height="250px" width="250px" class="img-responsive" src="../../../img/logo.png" /> 
 
</button>

如果可能的話我希望能有一個非JavaScript的解決方案。

Answer 1

您可以添加position: relative;到button然後設置top和圖像的left至50％，然後用margin-top和margin-left將圖像移回其大小的一半：

http://jsfiddle.net/g1cbeuho/4/

button:hover .remove-me { 
 
    opacity: 1; 
 

 
} 
 

 

 
button{ 
 
     position: relative; 
 
} 
 

 
.remove-me { 
 
    opacity: 0.5; 
 
    display: table-cell; 
 
    position: absolute; 
 
    width: 64px; 
 
    height: 64px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -32px; 
 
    margin-left: -32px; 
 
}

<button class="input-image remove-me-container focus" data-btid="3" id="imagepicker_1412162517704"> 
 
    <img class="remove-me" src="http://cdn.flaticon.com/png/64/7909.png" /> 
 
    <img draggable="false" height="250px" width="250px" class="img-responsive" src="../../../img/logo.png" /> 
 
</button>