Html 如何使这两个按钮居中，一个在另一个的右边？

我正在尝试修复这个JS提琴，使按钮都位于顶部（10%）并居中，第二个按钮正好位于另一个按钮的右侧

播放/暫停
重置
.包装纸{
文本对齐：居中；
}
.按钮1{
位置：绝对位置；
排名前10%；
}
.按钮2{
位置：绝对位置；
排名前10%；
右边距：15px；
}

目前它们是重叠的。

像这样的吗

.wrapper {
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10%;
}

如所见

我将包装器div的显示样式设置为flex，并通过

justify content:center

使它们水平居中。顶部的衬垫是包装高度的10%

---

文本对齐：居中

在这里没有任何作用，但我保留了它，以防您以后也要将文本居中。

在按钮1的样式中，我将

left: 30%;

对我来说，播放按钮在重置按钮后面

这是您的代码：

.wrapper {
    text-align: center;
    padding: 2px;
    
}

.button1 {
    position: absolute;
    top: 10%;
    left: 30%;
    
}
.button2 {
    position: absolute;
    top: 10%;
    margin-right: 50px;
}

---

几乎，它并不完全在我的测试网站的页面顶部，因为还有其他元素将它推下。这就是为什么我从绝对位置开始。以下内容似乎适合我：

.button_wrapper1{text align:center；margin:20px；}.button1{position:relative；top:10%；}

（与按钮2相同）

.wrapper {
    text-align: center;
    padding: 2px;
    
}

.button1 {
    position: absolute;
    top: 10%;
    left: 30%;
    
}
.button2 {
    position: absolute;
    top: 10%;
    margin-right: 50px;
}