html - Align text in ReactJS in a proper way

Question

I am fairly new to HTML/CSS. I created a pop-up window with Modal which I now try to adjust. Also, I am using a CSS Style Sheet which looks like this:

.scoreboard {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 450px;
    top: 100px;
    background: gold;
    mix-blend-mode: normal;
    border: 2px solid #25282B;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    text-align: center;
}

Then, the actual Modal looks like this:

<Modal
            isOpen={this.state.isModalOpen}
            onRequestClose={() => this.closeModal()}
            className={'scoreboard'}
            contentLabel="Example Modal"
        >
          {this.state.players.map(p => (
              <div>
                <p>Player: {p.username} Points:{p.points}</p>
              </div>
          ))}
        </Modal>

Now, as you can see I try to align the players name and score nicely, so that all the texts are properly ordered in the middle of .scoreboard. But at the moment it looks like this:

What would be the best way to align those texts so that they are placed in the middle of scoreboard and also have the same indents etc?

Thanks in advance and have a good one!

标签： htmlcssreactjs

Answer 1

使用位置：相对；而不是位置：绝对；