css - 使用 CSS 居中复选框

Question

我在我的 React.js 应用程序中使用 CSS 网格来精确定位我页面中的元素。我在网格中进行了拆分，但我无法找到复选框。我希望复选框在按钮下方居中，但它们位于网格的左侧。

你知道如何让它们居中吗？我已经阅读了帖子并尝试了文本对齐、对齐元素……但它仍然在左侧。

.wrapperUA{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 5vh 10vh 5vh 15vh 10vh 5vh 15vh 10vh 25vh;
  grid-gap: 5px;
  grid-template-areas:
  ". . . . ."
  ". . UA1 . ."
  ". UA21 UA22 UA23 ."
  ". . . . ."
  " . . UA3 . ."
  ". UA41 UA42 UA43 ."
  ". . . . ."
  ". . UA5 . ."
  ". . . . .";
  text-align: center;
  align-items: center;
  vertical-align: middle;
  align-content: center;
}

.UA1{
  grid-area: UA1;
}

.UA21{
  grid-area: UA21;
}

.UA22{
  grid-area: UA22;
}

.UA23{
  grid-area: UA23;
}

.UA3{
  grid-area: UA3;
}

.UA41{
  grid-area: UA41;
}

.UA42{
  grid-area: UA42;
}

.UA43{
  grid-area: UA43;
}

.UA5{
  grid-area: UA5;
}

.UA1, .UA3, .UA5{
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 50px;
    border: 2px solid blue;
    color: blue;
    background-color: transparent;
    font-weight: bold
}

      <div class="wrapperUA" >
          <Button 
                class="UA1"
                variant="primary">
                Read Manual
          </Button>
          <a class="UA21">text other language </a>
          <input class="UA22" type="checkbox" onChange={this.handleCheckManual} defaultChecked={this.state.Manual}/>
          <a class="UA23">I agree with User manual</a>
          <Button 
                class="UA3"
                variant="primary">
                Read User Agreement
          </Button>

            <a class="UA41">text other language</a>
            <input class="UA42" type="checkbox" onChange={this.handleCheckUCond} defaultChecked={this.state.UCond}/>
            <a class="UA43">I agree with user conditions</a>

          <Button 
              class="UA5"
              variant="primary">
              Pay
          </Button>
      </div>

Answer 1

用内联样式属性在每个复选框周围包裹一个 div 标签:

<div style="text-align: center;">
  <input class="UA22" type="checkbox" onChange={this.handleCheckManual} defaultChecked {this.state.Manual}/>
</div>