所以,这是一个小问题,可能有一个我的大脑显然无法想出的小解决方案。
HTML:
#div {
position: fixed;
top: 10%;
left: 20%;
right: 20%;
bottom: 10%;
z-index: 999;
text-align: center;
border-radius: 10px;
}
<div id="div">
<h1>Settings</h1>
<center>
<img src="/image/yOhGp.png" style="width: 30px; margin-bottom: -8px;"><br/>
<button style="float: bottom; position: absolute; bottom: 10px;">Hide</button>
</center>
</div>
显然,按钮卡在了屏幕的右侧。但是,我希望它像顶部的图像一样位于中间。谢谢:)
最佳答案
从 button
中删除样式并添加 margin-top
#div {
position: fixed;
top: 10%;
left: 20%;
right: 20%;
bottom: 10%;
z-index: 999;
text-align: center;
border-radius: 10px;
}
#div button {
margin-top: 30px;
}
<div id="div">
<h1>Settings</h1>
<center>
<img src="/image/yOhGp.png" style="width: 30px; margin-bottom: -8px;"><br/>
<button>Hide</button>
</center>
</div>
#div {
position: fixed;
top: 10%;
left: 20%;
right: 20%;
bottom: 10%;
z-index: 999;
text-align: center;
border-radius: 10px;
}
<div id="div">
<h1>Settings</h1>
<center>
<img src="/image/yOhGp.png" style="width: 30px; margin-bottom: -8px;"><br/>
<button style="float: bottom; position: absolute; bottom: 10px;">Hide</button>
</center>
</div>
关于html - 如何在 div 底部和图像下方放置一个按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67000902/