grid内のコンテンツ(ボタン)を中央揃えにしたい

Question

グリッド内のコンテンツを中央揃えにしたいのですが、うまくいきません。
色々と調べたのですが欲しい情報が載っていなくて困っています。
よければ、お力をお借りしたいです。
写真の青い部分を中央にしたいです。

  <div class="buttons_container">
    <div class="buttons_item">
      <button type="button" class=" tmp buttons"><font size='4'>固定費の編集</font></button>
    </div>
  </dev>

.buttons_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.buttons_item {
  margin: 20px 40px 20px;
}
.buttons {
  background-color: #CECECE;
  border: solid 1px #707070;
  border-radius: 30px;
  height: 50px;
  width: 180px;
}

Answer 1

buttonはインラインブロック要素なので text-align: center; で中央寄せできます。

.buttons_item {
  margin: 20px 40px 20px;
  text-align: center; /* 追加 */
}

インラインでないdivなどのブロックレベル要素なら、FlexBoxで中央寄せするといいでしょう。

.buttons_item {
  margin: 20px 40px 20px;
  display: flex;
  justify-content: space-around;
}

Comments

[gyoruo]

わかりやすいご回答ありがとうございます！