html - 如何让我的 div 彼此对齐？

Question

如何让数字“87”位于“总分”旁边？

我想要右边的数字和左边的“总分”文本，但“总分”写成两行。

我试过使用各种 div 结构、 float 和显示属性，但无法正常工作。

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;"><strong>Total<br>Score</strong>
  <div><span id="count" style="font-size: 2em;">87</span></div>
</div>

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  Rank #1 out of 321
</div>

Answer 1

您可以使用 Flexbox 来做到这一点:

div {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  margin: 1em;
  padding: 1em;
  background: #eee;
  border-radius: 10px;
}

div > * {margin: 0 5px} /* adjust */

#count {font-size: 2em}

<div>
  <strong>Total<br>Score</strong>
  <span id="count">87</span>
</div>

<div>Rank #1 out of 321</div>