你如何内联 div 内的元素对齐？

Question

How do you align those paragraphs inside the #main-informations div and the divs inside the #paper-scissors-rock div?

 <div id="main-informations"> <p>Score: <span id="score"></span></p> <p>You chose: <span id="user_choice"></span></p> <p>The machine chose: <span id="machine_choice"></span></p> <p>Result: <span id="result"></span></p> <p>Tries left: <span id="tries_left">3</span></p> <p>End result: <span id="end_result"></span></p> </div> <div id="paper-scissors-rock"> <div> <img width="30%" height="200px" src="images/paper.png"/><br> <button id="paper" width="30%" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Paper</button> </div> <div> <img width="30%" height="200px" src="images/scissors.png"/><br> <button id="scissors" width="30%" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Scissors</button> </div> <div> <img width="30%" height="200px" src="images/rock.png"/><br> <button id="rock" width="30%" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Rock</button> </div> </div> <div> <button id="restart" style="background-color: black; color: white; border: 1px solid white; border-radius: 2px">Restart</button> </div>

Answer 1

Check this.

#main-informations {
  display: flex;
 }
#paper-scissors-rock {
  display: flex;
 }