【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 を指定した要素を左右中央に配置する方法でした。
うっかり指定方法を忘れて調べましたが、思ったよりも簡単に実装出来ました。
ご参考になれば幸いです。