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

Answer 2

要使文本居中，您需要做的就是将div包裹在带有类的另一个div中。 然后使用CSS样式text-align: center center将文本居中。

小提琴： https ： //jsfiddle.net/o4gLnhLd/

如果您希望所有分数在中间对齐。 使用表格可能比使用divs更好。

无论哪种方式，都需要将数据分为3个元素。

Answer 3

您可以使用<table>并使用float来根据需要对齐它们，就像这样 。

尽管您仍然必须使边框透明。

Answer 4

我希望这有帮助：

 .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

并不完美，但这应该为您提供一个良好的起点：

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