如何在具有动态高度的按钮内居中前景图像？ [关闭]

【问题标题】：How center an foreground-image inside an button with dynamic height? [closed]如何在具有动态高度的按钮内居中前景图像？ [关闭]
【发布时间】：2014-11-26 06:03:30
【问题描述】：

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

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 解决方案。

【问题讨论】：

标签： html css image center

【解决方案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>

【讨论】：

太棒了，这个对我有用。