将同一行中的 3 个按钮与 css 对齐

Question

我想要垂直居中的三个按钮都在同一行中。我希望所有三个按钮都像文本“Select 你的攻击：”一样对齐。请告诉我如何在同一行中对齐三个对象。

.prompt_user_to_choose {
  margin: 0;
  display: flex;
  justify-content: center;
  min-height: 10vh;
  align-items: center;
  text-align: center;
  font-size: 25px;
}
.results {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  text-align: center;
  font-size: 25px;
}
.Rock {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(255, 60, 60);
}

.Paper {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(105, 255, 105);
}

.Scissors {
  width: 90px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: rgb(36, 186, 255);
}

这是我的

这就是我想要的：

Answer 1

三个按钮可以使用un flex容器，然后

.container {
    display:flex;
    /* items are centered along the line */
    justify-content: center;
    /* center: items are centered in the cross-axis */
    align-items: center;
}

将同一行中的 3 个按钮与 css 对齐

align 3 buttons in same row in the center of that row with css

css

center