CODEWITHSUNDEEP
htmlcssalignment
The Walrus
The Walrus

Reputation: 1208

Align something in the center of a div

say i have a list of footie scores and each one is a div

<div> Arsenal 2 0 Southampton </div>
<div> Tottenham 3 2 Burnley </div>
<div> Manchester City 0 5 Spurs </div>

I know how to align them if I want say all the first letters to sit underneath each other but how would i do it so that all the scores would sit underneath each other? thus meaning that the other text was not aligned

exactly how it is done here:

http://www.bbc.co.uk/sport/football/premier-league/scores-fixtures

Upvotes: 0

Views: 88

Answers (5)

Ayush Goyal
Ayush Goyal

Reputation: 392

You can use a <table> and use float to align them as you want, like this.

Though you still have to make the border transparent.

Upvotes: 1

bhansa
bhansa

Reputation: 7534

I hope this helps:

.score-card {
  margin:5px;
  padding:10px;
  text-align:center;
  font-size: 20px;
  border-bottom:1px solid #eee; 
}

.left {
  text-align: right;
  margin: 5px;
}

.right {
  text-align: left;
  margin: 5px;
}

.team {
  margin: 5px;
}

.score {
  padding: 5px;
  background: #ffd536;
}
<div class="score-card">

  <span class="left">
    <span class="team"> Arsenal </span>
    <span class="score"> 2 </span>
  </span>

  <span class="right">  
    <span class="score"> 0 </span>
    <span class="team"> Southampton </span>
  </span>

</div>

<div class="score-card">

  <span class="left">
    <span class="team"> Arsenal </span>
    <span class="score"> 2 </span>
  </span>

  <span class="right">  
    <span class="score"> 0 </span>
    <span class="team"> Southampton </span>
  </span>

</div>

<div class="score-card">

  <span class="left">
    <span class="team"> Arsenal </span>
    <span class="score"> 2 </span>
  </span>

  <span class="right">  
    <span class="score"> 0 </span>
    <span class="team"> Southampton </span>
  </span>

</div>

Upvotes: 1

drews
drews

Reputation: 146

Not perfect, but this should give you a good starting point:

.left{
  display:inline-block;
  width:50%;
  text-align:right;
}

.right{
  display:inline-block;
  width:45%;
  text-align:left;
}
<div class="left">Arsenal 2</div> <div class="right">0 Southampton</div>
<div class="left">Tottenham 3</div> <div class="right">2 Burnley</div>
<div class="left">Manchester City 0</div> <div class="right">5 Spurs</div>

Upvotes: 1

Anmol Sandal
Anmol Sandal

Reputation: 1488

I hope this is helpful. Please check the updated code

div {
text-align:center;
display:flex;
}

div span {
  width: 40%;
}

div span.score {
  width:20%;
}
div span:first-child {
  text-align: right;
}

div span:last-child {
  text-align: left;
}
<div> <span>Arsenal</span> <span class="score">2 0</span> <span>Southampton</span> </div>
<div> <span>Tottenham</span> <span class="score">3 2</span> <span>Burnley</span> </div>
<div> <span>Manchester City</span> <span class="score">0 5</span> <span>Spurs</span> </div>

Upvotes: 3

Jay
Jay

Reputation: 1678

To center the text, all you need to do is wrap the divs in another div with a class. Then use the CSS styling text-align: center to center the text.

Fiddle: https://jsfiddle.net/o4gLnhLd/

If you're wanting the scores to all align in the middle. You're probably better off using a table than divs.

Either way will require you to split the data into 3 elements.

Upvotes: 1

Related Questions