Html Question posted in
Some basic documentation can be found here.

Html – How do I Center Score Text for a Basketball Scoreboard?

I am making a basketball scoreboard and I’m wondering how do I center the score text inside of the scoreboard container?

While the main div is already set as a flex container, the p score text inside of the scoreboard container is not affected by justify content or align items.

I tried using margin 0 auto and using padding to center it, but that doesn’t look good at all.

I would appreciate any help!

body {
  margin: 0;
}

@font-face {
  font-family: cursed-timer;
  src: url(cursed-timer.ttf);
}

.container {
  margin: 100px auto;
  width: 600px;
  height: 425px;
  background-color: #150400;
  display: flex;
  justify-content: space-evenly;
  border-radius: 2px;
}

h3 {
  margin-top: 75px;
  color: #ffffff;
  font-size: 48px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 1px;
}

.scoreboard {
  margin-top: -40px;
  width: 150px;
  height: 125px;
  border: 1px solid #ffffff;
  border-radius: 2px;
}

p {
  color: #ffa500;
  font-family: cursed-timer;
  font-size: 72px;
  margin: 0 auto;
  padding: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <title>Home</title>
</head>

<body>
  <section class="container">
    <div>
      <h3>HOME</h3>
      <div class="scoreboard">
        <p>10</p>
      </div>
    </div>
    <div>
      <h3>GUEST</h3>
      <div class="scoreboard">
        <p>20</p>
      </div>
    </div>
  </section>
</body>

</html>
Tags:

2

Answers


  1. 0

    Try This:

    I simply added text-align: center; to the <p> containing the score text.

    body {
  margin: 0;
}

@font-face {
  font-family: cursed-timer;
  src: url(cursed-timer.ttf);
}

.container {
  margin: 100px auto;
  width: 600px;
  height: 425px;
  background-color: #150400;
  display: flex;
  justify-content: space-evenly;
  border-radius: 2px;
}

h3 {
  margin-top: 75px;
  color: #ffffff;
  font-size: 48px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 1px;
}

.scoreboard {
  margin-top: -40px;
  width: 150px;
  height: 125px;
  border: 1px solid #ffffff;
  border-radius: 2px;
}

p {
  text-align: center;
  color: #ffa500;
  font-family: cursed-timer;
  font-size: 72px;
  margin: 0 auto;
  padding: 25px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <title>Home</title>
</head>

<body>
  <section class="container">
    <div>
      <h3>HOME</h3>
      <div class="scoreboard">
        <p>10</p>
      </div>
    </div>
    <div>
      <h3>GUEST</h3>
      <div class="scoreboard">
        <p>20</p>
      </div>
    </div>
  </section>
</body>

</html>
    Login or Signup to reply.
  2. 0

    you may just use text-align: center; for the p, or

    .scoreboard {
    width: 150px;
    height: 125px;
    border: 1px solid #ffffff;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    and there’s no matter for using margin & padding anymore

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search