【CSS】vertical-alignで要素の縦軸の位置を指定する!

要素の縦軸の位置を指定するにはCSSのvertical-alignを使用します。

vertical-alignとは、縦方向の揃え位置を指定するプロパティであり、要素の位置を一番上にしたい場合や、一番下にしたい場合などに使用することができます。

また、vertical-alignプロパティはインライン要素、テーブルセル要素には適用されますが、divタグやpタグなどのブロック要素にはそのままでは適用できませんので注意してください。

そして、vertical-alignは要素の縦軸の位置を指定するだけでなく画像の隙間の余白を削除することもできます。

今回は、CSSのvertical-alignを使って要素の縦軸の位置を指定する方法について以下の内容で解説していきます。

⚫︎ vertical-alignの注意点

⚫︎ vertical-alignでインライン要素の縦軸の位置を指定する場合
⚫︎ vertical-alignでテーブルセル要素の縦軸の位置を指定する場合
⚫︎ vertical-alignでブロック要素での縦軸の位置を指定する場合

⚫︎ 画像の隙間の余白を削除する場合

vertical-alignとは

vertical-alignとは、縦方向の揃え位置を指定するプロパティとなります。

vertical-alignの書き方

vertical-alignの書き方は下記となります。

vertical-alignに「top」や「bottom」などの値を指定することで、要素の縦軸の位置を指定することができます。

またvertical-alignには「20px」や「40%」などの「数値+単位」で指定することも可能です。

vertical-alignの注意点

vertical-alignはインライン要素とテーブルセル要素には適用されますが、ブロック要素にvertical-alignを指定しても適用されませんので注意してください。

vertical-alignが効いていないと思っている方は、ブロック要素に「vertical-align」を指定している可能性があります。

要素の縦軸の位置を指定するサンプルコード

要素の縦軸の位置を指定するサンプルコードを紹介します。

vertical-alignでインライン要素の縦軸の位置を指定する場合

vertical-alignでインライン要素の縦軸の位置を指定してみます。

sample.html

style.css

出力結果

インライン要素で縦軸の位置を指定するとvertical-alignが適用されています。

vertical-alignでテーブルセル要素の縦軸の位置を指定する場合

vertical-alignでテーブルセル要素の縦軸の位置を指定してみます。

sample.html

style.css

出力結果

vertical-alignでテーブルセルの縦軸の位置を指定するとvertical-alignが適用されているものもあれば適用されていないものもあります。

vertical-alignでブロック要素の縦軸の位置を指定する場合

ブロック要素で縦軸の位置を指定してみます。

sample.html

style.css

出力結果

ブロック要素で縦軸の位置を指定する場合はvertical-alignは適用されません。

画像の隙間の余白を削除する場合

画像の隙間の余白を削除する場合はvertical-alignプロパティの値をbottomに指定します。

まずは、vertical-alignプロパティを使用しない場合を見てみます。

sample.html

style.css

出力結果

vertical-alignプロパティを使用しないで画像を表示すると、画像の下の部分に余白ができてしまいます。

しかし、vertical-alignプロパティのbottomを使用してみます。

sample.html

style.css

出力結果

vertical-alignにbottomを指定することで画像の隙間の余白を削除しています。

今回のポイント

vertical-alignで要素の縦軸の位置を指定

⚫︎ 要素の縦軸の位置を指定するにはCSSのvertical-alignを使用する

⚫︎ vertical-alignとは、縦方向の揃え位置を指定するプロパティである

⚫︎ vertical-alignはインライン要素とテーブルセル要素には適用されるが、ブロック要素にvertical-alignを指定しても適用されない
(vertical-alignが効いていないと思っている方は、ブロック要素に「vertical-align」を指定している可能性がある)

⚫︎ 画像の隙間の余白を削除する場合はvertical-alignプロパティの値をbottomに指定する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し