如何在父级左右标记

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>

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

<强> EDITED

这里添加了四个按钮＆amp;背景这个清楚。

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

Answer 2

如果查看.status，您会发现它的宽度与之前的<div>相同。要使文本居中，您需要为其提供CSS：

.status {
  text-align: center;
}

此外，<RoundedButton>不是HTML标记。请改用<button>。

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

Answer 3

这也可以起作用@Williams

.mainContainer {
  width: 500px;
  height: 200px;
  border: 2px solid black;
  background-color: lightgray;
}

.top {
  width: 100%;
  height: 50px;
  background-color: lightgray;
  display: table-cell;
  vertical-align: middle;
  padding-left: 100%;
}

.outputContainer {
  width: 100%;
  background-color: lightgray;
  height: 20px;
}

#score {
  margin-top: 50px;
  display: inline;
}

.third {
  width: 30%;
  height: 70px;
  background-color: lightgray;
  display: inline-block;
}

button {
  padding: 20px;
  border: 2px solid blue;
  border-radius: 10px;
  width: 100px;
}

<div class="mainContainer">
  <div class="top">
    <span id="score"><b> Score: </b></span>
  </div>
  
  <center>
    <div class="third">
      <button type="button"> Rock </button>
    </div>
    <div class="third">
      <button type="button"> Paper </button>
    </div>
    <div class="third">
      <button type="button"> Scissors </button>
    </div>
    
    <div class="outputContainer">
      <h2> Computer won! </h2>
    </div>
  </center>
</div>

Answer 4

为了在大多数情况下保持它们对齐而不仅仅是某个显示器上的修复，请尝试将它们放在一个并使用def f(key): s3_client = boto3.client('s3') body = s3_client.get_object(Bucket='bucket', Key=key)['Body'].read() return body data_rdd = sc.parallelize(keys_list).map(lambda key: f(key)) ，如此

display: block