<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
我试图在按钮上创建一个前景图像。 我已经准备好了:
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 解决方案。
最佳答案
你可以在button上添加position: relative;然后设置图片的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>关于html - 如何在具有动态高度的按钮内居中前景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26140667/