Установите флажок с помощью CSS

Question

Я использовал CSS-сетку в своем приложении React.js, чтобы точно находить элементы на моей странице. Я разделил на сетки, но у меня есть проблема, чтобы найти флажок. Я бы хотел, чтобы флажки располагались по центру под кнопкой, но они оставались слева от своей сетки.

Вы знаете, как их отцентрировать? Я читал посты и пробовал что-то text-align, align-items, ... но он остается слева.

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