如何将前景图像置于具有动态高度的按钮内？

Question

我试图在按钮上创建前景图像。 我已经做好了准备：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果可能，我更喜欢非JavaScript解决方案。

Answer 1

您可以将position: relative;添加到button，然后将图片的top和left设置为50％，然后使用margin-top和{{1}将图像移回原来的一半：

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

＆＃13;

＆＃13;

margin-left

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;