我正在努力想明白为什么我不能把按钮相对于它的图像定位,而是放在屏幕的底部。我试着阅读了其他的问题,但是从前面的回答中想不出一个解决方案。也许我的情况不一样?
本质上,我试图将按钮定位在图像下方,同时保持它(按钮)居中,并保持它的响应性。我是一个长期的读者第一次问问题。如能提供任何有助于解决问题的投入,将不胜感激。
也许我的divs不在了?
null
.randomImage {
position: fixed;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
height: auto;
width: auto;
top: 20%;
}
.btnGroup {
margin: 0 auto;
width: 20px;
color: red;
position: relative;
}
#buttonOne {
position: absolute;
}
<div class="blackOverLay">
<div class="imageContainer">
<div class="imageHold">
<image class="randomImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9dq_0kM7kPFwPJAzHSFNRThXKHmD1ryYDf78YrDNJX7IiExM3sA">
</img>
<div class="btnGroup">
<button id="buttonOne" onclick="closeThis()">CLOSE</button>
</div>
</div>
</div>
</div>
null
如果我理解你,这就是你想要的。
null
.randomImage {
position: absolute;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
height: auto;
width: auto;
}
.btnGroup {
margin: 0 auto;
width: 20px;
color: red;
}
.imageContainer {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
#buttonOne {
position: absolute;
bottom: 0
}
<div class="blackOverLay">
<div class="imageContainer">
<div class="imageHold">
<img class="randomImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9dq_0kM7kPFwPJAzHSFNRThXKHmD1ryYDf78YrDNJX7IiExM3sA" />
<div class="btnGroup">
<button id="buttonOne" onclick="closeThis()">CLOSE</button>
</div>
</div>
</div>
</div>