在 div 的中心对齐某些东西答案

【问题标题】：Align something in the center of a div在 div 的中心对齐某些东西
【发布时间】：2017-09-22 11:34:57
【问题描述】：

假设我有一个足球得分列表，每个都是一个 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

【问题讨论】：

标签： html css alignment

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

并不完美，但这应该会给你一个很好的起点：

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

【讨论】：

【解决方案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>

【讨论】：

在您的答案中添加另一个字段存在错误对齐。请使用相同的 css 进行更新，您将得到结果。
有更多的足球俱乐部，在一个领域添加曼联而不是阿森纳，或者有许多其他俱乐部。
兄弟你不明白，让我给你一个不同名字的答案的小提琴链接
请查看jsfiddle.net/anmolsandal/kms9kdzx/1希望您现在有答案

【解决方案5】：

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

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

【讨论】：