どうも、すなです。
今回は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;です。
具体的には以下の様になります。
<!-- HTMLファイル --->
<div>
<span>こんにちは</span>
</div>
/* CSSファイル */
div {
text-align: center;
}
span {
display: inline-block;
}親要素にtext-align: center;を適用することで子要素のinline-block要素が中央寄せされます。
これで皆さんもWeb制作マスターですっ！
コメントを残す