让div留在容器中

Question

我想在图像上放一个按钮，但如果图像有＆lt;高度比id =＆＃34; addgravity＆＃34;顶部：-300px，按钮将从容器中出来。

<div class="item">
    <img src=""/><hr style="position: relative;top:-20px;"/>
    <div id="addgravity" style="position:relative;top:-300px;background:white;
    height:56px;color:white;opacity:0.9;"class="item">button</div>
</div>

Answer 1

通过使用负边距来定位事物，你会让自己变得困难。为什么不定位＆＃39;按钮＆＃39;绝对如此，无论图像大小如何，它都保持在中间对齐？

＆＃13;

＆＃13;

.item {
    display:inline-block;
    position:relative;
}
#addgravity {
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    background:white;
    height:56px;
    color:black;
    opacity:0.9;
    margin:auto;
}

＆＃13;

<div class="item">
    <img src="http://www.placehold.it/300" />
    <div id="addgravity">button</div>
</div>

＆＃13;

＆＃13;

＆＃13;