html - 如何在父左右标签之间的中心设置文本

Question

我的网页布局是这样的，最后一个 div标签 <div>{this.props.status}</div>在左端。我想将它设置在摇滚和剪刀按钮之间的中心。

预期

<div className="AppTitle">
<b>Score: {this.props.score}</b>
<div>
  <RoundedButton text="Rock" clickitem={this.clickitem} />
  <RoundedButton text="Paper" clickitem={this.clickitem} />
  <RoundedButton text="Scissors" clickitem={this.clickitem} />
</div>

<div>{this.props.status}</div>

</div>

应用.css

.AppTitle {
  margin: 50px;
}

.Button {
  padding: 20px;
  margin: 20px;
  border: 1px solid blue;
  border-radius: 10px;
}

在 HTML 中如何实现？

Answer 1

为 css 尝试这个。

.AppTitle {
  margin: 50px;
  display:inline-block;
 }

.button {
  padding: 20px;
  margin: 20px;
  border: 1px solid blue;
  border-radius: 10px;
}
.status{text-align:center;}

<div class="AppTitle">
<b>Score: -1</b>
<div>
  <Button class="button">Rock</Button>
  <Button class="button">Paper</Button>
  <Button class="button">Scissors</Button>
  
</div>

<div class="status">Computer Won</div>

</div>

已编辑

这里加了四个按钮，背景清空这个。

.AppTitle {
  margin: 50px;
  display:inline-block;
  background:#b5b5b5;
 }

.button {
  padding: 20px;
  margin: 20px;
  border: 1px solid blue;
  border-radius: 10px;
}
.status{text-align:center;background:#ccc;}

<div class="AppTitle">
<b>Score: -1</b>
<div>
  <Button class="button">Rock</Button>
  <Button class="button">Paper</Button>
  <Button class="button">Scissors</Button>
  <Button class="button">Rock</Button>
 
  
</div>

<div class="status">Computer Won</div>

已更新

让父div居中。

.wrapper{text-align:center;}
.AppTitle {
  margin:50px;
  display:inline-block;
  background:#b5b5b5;
  text-align:left;
 }

.button {
  padding: 20px;
  margin: 20px;
  border: 1px solid blue;
  border-radius: 10px;
}
.status{text-align:center;background:#ccc;}

<div class="wrapper">
<div class="AppTitle">
<b>Score: -1</b>
<div>
  <Button class="button">Rock</Button>
  <Button class="button">Paper</Button>
  <Button class="button">Scissors</Button>
 
</div>

<div class="status">Computer Won</div>

</div>
</div>