ちょっとディープな生物の世界

【CSS】インラインボックス、インラインブロック内での縦方向の位置を指定する「vertical-align」

「インライン」内での位置を指定する

vertical-alignはインライン要素でのみ使えるプロパティです。インライン要素に含まれているインライン要素の位置を指定します。例えば、文章中に出現する画像の位置などを指定します。

See the Pen verical-alignの使い方 by バイオハックch (@synd1090) on CodePen.

ブロック要素では使えない

vertical-alignはインライン要素でしか使えません。そのため、div要素でvertical-alignを使おうとするときは、display:inlineや、display:inline-blockなどで要素を変える必要があります。

vetical-alignで指定できる値には、top、text-top、middle、baseline、text-bottom、bottomなどがあります。どれも親要素に対しての縦方向の整列を示しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です