CODEWITHSUNDEEP
htmlcss
Pranay Tripathi
Pranay Tripathi

Reputation: 1882

Scoreboard design using HTML and CSS

I m trying to design a score board in following manner:

                  0 - 0
               Home - Away

Now the issue happening here is the if the length of name of Home team is bigger, it pushing the - further. I want - to be aligned with the - in the score above. my html structure is something like following:

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

I have tried putting direction property to the span to use rtl. I also tried providing text-align center and putting the position property as fixed. but it didnt work. Not sure if I m going right here or not. Any help is appreciated

Upvotes: 0

Views: 4271

Answers (2)

Temani Afif
Temani Afif

Reputation: 272965

If you can add an extra wrapper you can simply use 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>

Upvotes: 1

saidutt
saidutt

Reputation: 289

You can do something like this, but you always have number of other ways to style as you need.

<div class="main">
  <div class="home-screen">
     <p> 0 </p>
     <p> Home </p>
  </div>
  <div> - <div>
  <div class="away-screen">
     <p> 0 </p>
     <p> Away </p>
  </div>
</div>

style.css

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

Upvotes: 0

Related Questions