Aligner quelque chose dans le centre d'un div

Question

dire que j'ai une liste des scores footie et chacun est un div

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

Je sais comment les aligner si je veux dire toutes les premières lettres à siéger en dessous de chaque autre mais comment le ferais-je de sorte que tous les scores seraient assis les uns au-dessous des autres? ce qui signifie donc que l'autre texte n'a pas été aligné

exactement comment il se fait ici:

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

Answer 1

J'espère que c'est utile. S'il vous plaît vérifier le code mis à jour

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>

Answer 2

Pour centrer le texte, tout ce que vous devez faire est de envelopper les divs dans un autre div avec une classe. Utilisez ensuite le style CSS text-align: center pour centrer le texte.

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

Si vous êtes désireux scores à tous les aligner au milieu. Vous êtes probablement mieux d'utiliser une table que divs.

Dans les deux cas, vous devrez diviser les données en 3 éléments.

Answer 3

Vous pouvez utiliser un <table> et utiliser float pour les aligner comme vous voulez, comme this.

Bien que vous deviez toujours rendre la bordure transparente.

Answer 4

J'espère que cette aide:

.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>

Answer 5

Pas parfait, mais cela devrait vous donner un bon point de départ:

.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>