【CSS】display: inline-blockの要素を左右中央に配置する方法│株式会社シーポイントラボ

今日少し躓いたので、備忘録としてまとめ。
タイトルにある通り、display: inline-block を指定した要素を、左右中央に配置する方法についてです。

最初、margin: 0 auto; を指定したのですが、こちらは width が指定されている必要があり、幅を可変としたい要素では使用できませんでした。

今回参考にさせていただいた記事はこちら。

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ
 https://www.granfairs.com/blog/staff/centering-by-css

さて、inline-block 要素を中央寄せする方法ですが、まず中央寄せしたい要素に対して親要素を指定する必要があります。
下記のサンプルコードのように、中央寄せしたい要素を <div> などで囲みます。

<div>
    <p>テストテキスト</p>
</div>

なお、<p> 要素は本来なら display: block; なのですが、後述する CSS で display: inline-block; を指定しています。

そして親要素で囲んだら、その親に対して text-align: center; を指定するだけです。
CSS のサンプルコードは下記の通りです。

div {
  text-align: center;
}
p {
  display: inline-block;
  background-color: lightblue;
}

分かりやすいように、<p> 要素には背景色を指定しました。
必要な CSS は以上です。

実際に実行すると、inline-block の要素が左右中央に配置されているはずです。

以上、display: inline-block を指定した要素を左右中央に配置する方法でした。
うっかり指定方法を忘れて調べましたが、思ったよりも簡単に実装出来ました。
ご参考になれば幸いです。

【CSS】display: inline-blockの要素を左右中央に配置する方法