[CSS]inline-blockの要素を中央寄せにする方法

inline-block要素を中央寄せにしようとしたけど、うまく中央寄せできずにハマってしまった経験もある人も多いのではないでしょうか？

今回はinline-block要素を中央寄せにする方法を紹介します。

inline-blockにはmargin:0 auto;やtext-align:centerは効かない

まず、先に抑えておきたいのがinline-block要素にはmargin:0 auto;やtext-align:centerは効かないということ。

text-align:centerも単体では動作してくれません。

inline-blockを中央揃えにする方法

inline-block要素を中央揃えにするシンプルな方法は、親要素でtext-align:centerを指定してあげれば快活します。

具体的には以下のように記述します。

<div class="wrap">
  <p>inline-block</p>
</div>

.wrap{
  text-align:cneter;
}