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

どうも、すなです。
今回はWeb制作で用いるテクニックの一つになります。
内容はタイトルの通りで、「inline-block要素を中央寄せする方法」になります。
できそうでずっと躓いていたので、まとめました。
親要素にtext-align: center ;を用いる
先に結論を書いてしまいました。上記の見出しの通りです。
では詳しく解説。
inline-block要素自体は中央寄せできない
inline-block要素自体はblock要素とinline要素の中間的な存在で、両者の下記の特徴を兼ね備えています。
- block要素と同様に、要素自体にheightやwidth、またmarginとpaddingが指定できる
- inline要素と同様に、要素自体が流動的で複数のinline-blockと共に横並びになる
inline要素の特徴を持ちながら、block要素の特徴も持っている非常に優秀な要素です。しかし便利である一方でblock要素とは違い、要素自体が流動的で要素が左詰めになってしまいます。
要素自体ではなく、親要素にcssを用いる
inline-block自体には上記の様な特徴があるので、inline-block自体ではなく、その親要素に対してcssを追加します。
それが先にも言った通り、text-align: center;です。
具体的には以下の様になります。
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- HTMLファイル ---> <div> <span>こんにちは</span> </div> /* CSSファイル */ div { text-align: center; } span { display: inline-block; } |
親要素にtext-align: center;を適用することで子要素のinline-block要素が中央寄せされます。
これで皆さんもWeb制作マスターですっ!
-
前の記事
左上にロゴ、右上に横並びliの方法 2021.02.19
-
次の記事
初めてサイト模写した結果 2021.02.22