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

我希望这会有所帮助。请检查更新的代码

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

如果你想让分数全部排在中间位置。你最好不要使用桌子而不是div。

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

Answer 3

您可以使用<table>并使用float根据需要对齐它们，例如this。

虽然你仍然需要使边框透明。

Answer 4

我希望这会有所帮助：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

对齐div中心的东西

5 个答案: