html - 在 div 的中心对齐某些东西

Question

假设我有一个足球比分列表，每个比分都是一个 div

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

如果我想说所有第一个字母都位于彼此下方，我知道如何对齐它们，但我该怎么做才能使所有乐谱位于彼此下方？因此意味着其他文本未对齐

这里具体是怎么做的:

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

Answer 1

希望对您有所帮助。请检查更新后的代码

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>