Html 如何让我的按钮留在中间在我的图像滑块下？ 我有两个按钮，不管屏幕有多大，我都想呆在滑块中间。我怎样才能做到这一点，现在当我改变屏幕大小时，他们只是在跳跃。当我有最大和最小的尺寸，它看起来不错，但不是当它介于两者之间

。按钮右键{
边界半径：4px；
背景色：黑色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：17px；
宽度：90px；
过渡：均为0.5s；
光标：指针；
}
.按钮左{
边界半径：4px；
背景色：黑色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：17px；
宽度：90px；
光标：指针；
}
.幻灯片{
左边距：300px；
边缘顶部：20px；
最小宽度：500px；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.幻灯片{
左边缘：14%；
}
}
#钮扣{
左缘：27%；
宽度：50%；
}
@媒体屏幕和屏幕（最大宽度：767px）{
#钮扣{
左缘：18%；
}
}

❮
❯

这是你想要的吗

我在main div（幻灯片）中添加了

text align:center

，这样里面的所有内容都将居中

。按钮右键{
边界半径：4px；
背景色：黑色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：17px；
宽度：90px；
过渡：均为0.5s；
光标：指针；
}
.按钮左{
边界半径：4px；
背景色：黑色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：17px；
宽度：90px；
光标：指针；
}
.幻灯片{
边缘顶部：20px；
最小宽度：500px；
}
.中心{
文本对齐：居中；
}

❮
❯

以下是我使用Flexbox的解决方案：

.container{
身高：100%；
宽度：100%；
}
.幻灯片{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.幻灯片{
利润率：0.5px；
}
.按钮{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.按钮左，
.按钮正确{
边界半径：4px；
背景色：黑色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：17px；
宽度：90px；
保证金：7.5px 5px 0.5px；
过渡：均为0.5s；
光标：指针；
}

❮
❯

这里还有一个解决方案

#按钮{
保证金：0自动；
}
.幻灯片{
边缘顶部：20px；
文本对齐：居中；
}
.按钮右，.按钮左{
边界半径：4px；
背景色：黑色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：17px；
宽度：90px；
光标：指针；
过渡：均为0.5s；
}

❮
❯

提醒一下，请将最有助于回答您问题的答案标记为已接受的答案。它将帮助将来可能有同样问题的其他人。