Question

如何制作号码＆＃34; 87＆＃34;坐在＆＃34;总分＆＃34;？

旁边

我想要右边的数字和＆＃34;总分＆＃34;左边的文字，但是＆＃34;总分＆＃34;写在两行。

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

＆＃13;

<FlatList
    contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
    //... other props
/>

＆＃13;

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>

Answer 2

在此之后更改css和strong的{{1}}

div

Answer 3

这看起来会更好，请试试这个

＆＃13;

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  <strong style="display: inline-block; vertical-align: middle;">Total Score : 
				<div style="display: inline-block; vertical-align: middle;><span id="count" style="font-size: 2em;">87</span></div>
			</strong>
</div>

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  Rank #1 out of 321
</div>

＆＃13;

如何让我的div彼此对齐？

3 个答案: