编写Web游戏记分板的CSS布局

Question

我想了解一些关于如何在CSS中编写游戏记分板的建议，看起来像附加的参考图纸。 “玩家1”和“玩家2”位于每个得分框的中心，所有元素都在记分板容器中居中。

Answer 1

试试这个：

＆＃13;

＆＃13;

.score-board {
  text-align: center;
  padding: 25px;
}
.player {
  display: inline-block;
  padding: 15px;
}
.player h4 {
  font-weight: bold;
}
.score-box {
  border: 3px solid black;
  padding: 30px;
  color: #2CB3C9;
}

＆＃13;

<div class="score-board">
  <div class="player">
    <h4>Player 1</h4>
    <div class="score-box">
      15
    </div>
  </div>
  <div class="player">
    <h4>Player 2</h4>
    <div class="score-box">
      10
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;