【備忘録】display:inline-blockの要素を中央揃えする方法

どうも、とるねもです。

要素の幅を文字の幅と同じにしたいときに個人的によく使う『display:inline-block』。

が、その中央揃えの方法を何回も忘れては調べ直してしまってたのでメモ代わりに書いておきます。

やり方

ポイントはdisplay:inline-block;の親要素にtext-align:center;を設定してあげることです。

サンプル

HTML

<div class="text">
<h1>見出し</h1>
<div>

CSS

.text{
    text-align:center;
}
h1{
    display:inline-block;
}

これで中央揃えできます。

h1の中に直接text-align:center;をしても左右中央にはならないので注意しましょう。わかったか自分！！

というわけで今回の記事はこれで終わりです。

お読みいただき、ありがとうございました！