Creating a scoreboard layout with HTML and CSS

Question

Creating a scoreboard layout with HTML and CSS

I am attempting to create a scoreboard in the following format:

                  0 - 0
               Home - Away

The issue I am facing is that if the length of the Home team's name is longer, it pushes the dash (-) further. I want the dash to be aligned with the one in the score above. My HTML structure looks something like this:

      <div className="score">
        <span>0</span>-<span>0</span>
      </div>
      <div className="team">
        <span>{homeName}</span>-<span>{awayName}</span>
      </div>

I have tried using the direction property on the span with rtl. I have also experimented with setting text-align to center and using the position property with fixed values, but it did not work. I am not sure if I am on the right track or not. Any assistance would be greatly appreciated.

html css

Answer 1

Answer №1

If you want to add an additional wrapper, you can easily implement display:table

.main {
  display: table;
}

.score,
.team {
  display: table-row;
}

span {
  display: table-cell;
}

span:first-child {
  text-align: right;
  padding-right: 10px;
  position: relative;
}

span:last-child {
  text-align: left;
  padding-left: 10px;
}

/*the line between scores*/
span:first-child::before {
  content: "-";
  position: absolute;
  right:-2px;
  top: 0;
}

<div class="main">
  <div class="score">
    <span>0</span><span>0</span>
  </div>
  <div class="team">
    <span>Home</span><span>away</span>
  </div>
</div>
<div class="main">
  <div class="score">
    <span>0</span><span>0</span>
  </div>
  <div class="team">
    <span>Home Home Home</span><span>away</span>
  </div>
</div>

Answer 2

If you want to add an additional wrapper, you can easily implement display:table

.main {
  display: table;
}

.score,
.team {
  display: table-row;
}

span {
  display: table-cell;
}

span:first-child {
  text-align: right;
  padding-right: 10px;
  position: relative;
}

span:last-child {
  text-align: left;
  padding-left: 10px;
}

/*the line between scores*/
span:first-child::before {
  content: "-";
  position: absolute;
  right:-2px;
  top: 0;
}

<div class="main">
  <div class="score">
    <span>0</span><span>0</span>
  </div>
  <div class="team">
    <span>Home</span><span>away</span>
  </div>
</div>
<div class="main">
  <div class="score">
    <span>0</span><span>0</span>
  </div>
  <div class="team">
    <span>Home Home Home</span><span>away</span>
  </div>
</div>

Answer 3

Answer №2

Here is one example of how you can achieve this layout, but remember there are many other ways to style it to fit your needs.

<div class="container">
  <div class="section1">
     <p> 0 </p>
     <p> Section 1 </p>
  </div>
  <div class="divider"> - </div>
  <div class="section2">
     <p> 0 </p>
     <p> Section 2 </p>
  </div>
</div>

styles.css

.container {
  display: flex;
  flex-direction: row;
}

Answer 4

Here is one example of how you can achieve this layout, but remember there are many other ways to style it to fit your needs.

<div class="container">
  <div class="section1">
     <p> 0 </p>
     <p> Section 1 </p>
  </div>
  <div class="divider"> - </div>
  <div class="section2">
     <p> 0 </p>
     <p> Section 2 </p>
  </div>
</div>

styles.css

.container {
  display: flex;
  flex-direction: row;
}

Creating a scoreboard layout with HTML and CSS

Answer №1

Answer №2

Similar questions

What steps can I take to create a textbox that expands as more text is

Adjusting the input label to be aligned inside the input box and positioned to the right side

Some CSS styles are not displaying correctly within an iframe

The issue with jQuery click function seems to be limited to Firefox

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

Issue: AngularJS Injector Module Error

Error with Flask url_for when trying to play a video

How do I make an element stay in place between two other elements?

Revising text for real-time editing

Include a parent class within the style tags in your CSS code

Element failing to adhere to CSS grid layout

Extracting outer td data from a td element containing an inner table using JSoup

Tips on utilizing jQuery or JavaScript to efficiently filter out outcomes exceeding a specified range

Translate CSS into JavaScript while maintaining selector understanding

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Try using Bootstrap 4 Carousel columns instead of the traditional carousel-item

Automatically select and pre-fill a list item based on its value using jQuery

Playground Themed Central Menu Features

Sending an AJAX request when refreshing a page segment

Adding identifiers to columns in DataTables depending on the value of another attribute