inline-blockを中央寄せする方法

どうも、すなです。

今回はWeb制作で用いるテクニックの一つになります。

内容はタイトルの通りで、「inline-block要素を中央寄せする方法」になります。

できそうでずっと躓いていたので、まとめました。

親要素にtext-align: center ;を用いる

先に結論を書いてしまいました。上記の見出しの通りです。

では詳しく解説。

inline-block要素自体はblock要素とinline要素の中間的な存在で、両者の下記の特徴を兼ね備えています。

inline要素の特徴を持ちながら、block要素の特徴も持っている非常に優秀な要素です。しかし便利である一方でblock要素とは違い、要素自体が流動的で要素が左詰めになってしまいます。

inline-block自体には上記の様な特徴があるので、inline-block自体ではなく、その親要素に対してcssを追加します。

それが先にも言った通り、text-align: center;です。

具体的には以下の様になります。

<!-- HTMLファイル --->
<div>
    <span>こんにちは</span>
</div>

/* CSSファイル */
div {
    text-align: center;
}
span {
    display: inline-block;
}

<div>

<span>こんにちは</span>

</div>

/* CSSファイル */

div {

text-align: center;

}

span {

display: inline-block;

}

親要素にtext-align: center;を適用することで子要素のinline-block要素が中央寄せされます。

これで皆さんもWeb制作マスターですっ！