html - 为网页游戏记分板编码CSS布局

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        4年前关闭。
                                                                                            
                
        
我想提出一些有关如何在CSS中编写游戏记分牌的建议，使其看起来像所附的参考图。 “玩家1”和“玩家2”位于每个计分框上方的中心，所有元素都位于计分板容器的中心。

最佳答案

尝试这个：

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

<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>