Html 我能'；t将按钮放置在我的图像中

基本上，我想将按钮放置在图像中，并在切换到移动模式或更改窗口大小时使其保持在原来的位置

这就是我希望它看起来的样子：

.img包装器{
位置：相对位置；
}
.img响应{
最大宽度：100%；
高度：自动；
边缘顶部：180像素；
左边距：360px；
}
a、 btn{
显示：内联块；
填充物：0.2em 1.45em；
边缘：0.1米；
边框：0.15em实心#中交；
框大小：边框框；
文字装饰：无；
字体系列：“SegoeUI”，“Roboto”，无衬线；
字体大小：400；
颜色：#000000；
背景色：#ffc966；
文本对齐：居中；
位置：相对位置；
}
a、 btn：悬停{
边框颜色：#7a7a；
}
a、 btn：活动{
背景色：#999999；
}
@全部和全部介质（最大宽度：30em）{
a、 btn{
显示：块；
保证金：0.2米自动；
}
}

De zakelijke VR/AR硬件leverancier van Benelux

（我提前发布..不小心按下了发布按钮）。。。您没有img或H1的css。。我添加了一些，我还为主css和响应（媒体）css中的图像添加了最大宽度。 该代码可以做一些调整，但我建议你看看，并适应你的需要。我想这更接近你想要的

编辑：我建议您添加更多的媒体查询，以适应不同的屏幕分辨率，因为在不同大小的设备上，绝对定位可能有点像噩梦。是一个很好的工具，用于测试代码在多种大小上的外观。使用以像素为单位的大边距底部（如360px）可能会导致按钮甚至无法在屏幕上显示，因此在测量高度时，请尝试使用垂直高度（vh）或百分比。[calc函数]也非常有用。用于居中的有用css有

边距：0自动

或

文本对齐：居中

祝你好运，希望这对你有所帮助


h1{
文本对齐：居中；
字体大小：粗体；
字号：1.8em；
}
img{
最大宽度：70%；
最高高度：80%；
利润率：10px 12%；
}
img包装器{
显示：内联块；
位置：相对位置；
}
导航{
保证金：0自动；
}
导航ul{
列表样式类型：无；
背景颜色：浅灰色；
宽度：100%；
}
李国荣{
最小宽度：18%；
显示：内联块；
文本对齐：居中；
填充：10px；
保证金：0自动；
}
ullia{
填充：10px 15px；
文字装饰：无；
}
/*.img响应{
/*边缘顶部：100px；
左边距：360px；
}*/
a、 btn{
显示：内联块；
填充物：0.2em 1.45em；
边缘：0.1米；
边框：0.15em实心#中交；
框大小：边框框；
文字装饰：无；
字体系列：“SegoeUI”，“Roboto”，无衬线；
字体大小：400；
颜色：#000000；
背景色：#ffc966；
文本对齐：居中；
位置：相对位置；
}
a、 btn：悬停{
边框颜色：#7a7a；
}
a、 btn：活动{
背景色：#999999；
}
@全部和全部介质（最大宽度：30em）{
img{
最大宽度：400px；
}
a、 btn{
显示：块；
保证金：0.2米自动；
}
}
De zakelijke VR/AR硬件leverancier van Benelux






（我提前发布..不小心按下了发布按钮）。。。您没有img或H1的css。。我添加了一些，我还为主css和响应（媒体）css中的图像添加了最大宽度。
该代码可以做一些调整，但我建议你看看，并适应你的需要。我想这更接近你想要的

编辑：我建议您添加更多的媒体查询，以适应不同的屏幕分辨率，因为在不同大小的设备上，绝对定位可能有点像噩梦。是一个很好的工具，用于测试代码在多种大小上的外观。使用以像素为单位的大边距底部（如360px）可能会导致按钮甚至无法在屏幕上显示，因此在测量高度时，请尝试使用垂直高度（vh）或百分比。[calc函数]也非常有用。用于居中的有用css有
边距：0自动
或
文本对齐：居中

祝你好运，希望这对你有所帮助


h1{
文本对齐：居中；
字体大小：粗体；
字号：1.8em；
}
img{
最大宽度：70%；
最高高度：80%；
利润率：10px 12%；
}
img包装器{
显示：内联块；
位置：相对位置；
}
导航{
保证金：0自动；
}
导航ul{
列表样式类型：无；
背景颜色：浅灰色；
宽度：100%；
}
李国荣{
最小宽度：18%；
显示：内联块；
文本对齐：居中；
填充：10px；
保证金：0自动；
}
ullia{
填充：10px 15px；
文字装饰：无；
}
/*.img响应{
/*边缘顶部：100px；
左边距：360px；
}*/
a、 btn{
显示：内联块；
填充物：0.2em 1.45em；
边缘：0.1米；
边框：0.15em实心#中交；
框大小：边框框；
文字装饰：无；
字体系列：“SegoeUI”，“Roboto”，无衬线；
字体大小：400；
颜色：#000000；
背景色：#ffc966；
文本对齐：居中；
位置：相对位置；
}
a、 btn：悬停{
边框颜色：#7a7a；
}
a、 btn：活动{
背景色：#999999；
}
@全部和全部介质（最大宽度：30em）{
img{
最大宽度：400px；
}
a、 btn{
显示：块；
保证金：0.2米自动；
}
}
De zakelijke VR/AR硬件leverancier van Benelux






按钮相对于其第一个父元素的位置应为绝对位置

a.btn 
{
    position: absolute;
    top: 50%;
    left: 50%;
}


.img包装器{
位置：相对位置；
}
a、 btn{
位置：绝对位置；
最高：50%；
左：50%；
填充物：0.2em 1.45em；
边缘：0.1米；
边框：0.15em实心#中交；
框大小：边框框；
文字装饰：无；
字体系列：“SegoeUI”，“Roboto”，无衬线；
字体大小：400；
颜色：#000000；
背景色：#ffc966；
文本对齐：居中；
}
a、 btn：悬停{
边框颜色：#7a7a；
}
a、 btn：活动{
背景色