gpt4 book ai didi

html - 如何在 div 底部和图像下方放置一个按钮?

转载 作者:行者123 更新时间:2023-12-04 15:00:47 24 4
gpt4 key购买 nike

所以,这是一个小问题,可能有一个我的大脑显然无法想出的小解决方案。

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com