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

Question

I want the three buttons centered vertically all in the same row. I want all three button aligned like text "Select your attack:" is. please tell me how to align three object in same row.

.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);
}

this is what I have

this is what I want:

**Don't** use `width` - let the textContent dictate the natural width of your element — Roko C. Buljan, Feb 26 '22 at 10:42

score 1 · Accepted Answer · edited Feb 26 '22 at 10:32

1

You can use un flex container for the three buttons and then

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

edited Feb 26 '22 at 10:32

Dharman

30,962
25
85
135

answered Feb 26 '22 at 10:26

Fatima Zohra BELABDI

46
5

thank you! and the comments were very helpful – sergio mendoza Feb 26 '22 at 11:13

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

1 Answers1