文字列や画像などの縦方向の位置を指定しよう！（vertical-align プロパティ）

使用プロパティセレクタ { vertical-align: 縦方向の位置; }

CSS一覧プロパティ辞典 … vertical-align プロパティ

vertical-align プロパティを使うと、インライン要素や、表のセルの中での縦方向の位置を指定できます。vertical-align プロパティは、ブロック要素には指定できません。指定できる値の詳細は下の[vertical-align プロパティの値]という表で説明しています。

[vertical-align プロパティの値]
値	値の効果
sub	下付き文字の位置で表示します。
super	上付き文字の位置で表示します。
baseline	ベースラインに要素を揃えて表示します。
middle	要素を中央揃えで表示します。
text-top	要素の上辺をテキストの上端に揃えます。
text-bottom	要素の下辺をテキストの下端に揃えます。
top	要素の上辺を行の高さの上端に揃えにします。
bottom	要素の下辺を行の高さの下端に揃えにします。
パーセンテージ	line-heightプロパティで指定した行の高さの値に対する割合をパーセンテージで指定できます。指定した行の高さに対するパーセンテージ分だけ要素を上に表示します。要素を下に表示するにはマイナス値を指定します。
長さ	pxやemなどの単位をつけて指定します。指定された長さ分だけ要素を上に表示します。要素を下に表示するにはマイナス値を指定します。

表のセルに指定できる値は？

表のセルに指定できる値は「baseline」、「middle」、「top」、「bottom」しか指定できないので注意が必要です。

表示例の記述

vertical-align プロパティの値をキーワードで指定した場合の表示例を紹介します。このとき、vertical-align プロパティで文字列の縦方向の位置をHTMLの style 属性（HTML文書の要素に直接記述する方法）に記述します。
※記述例で指定している画像のパスは「sample.gif」と指定しています。
※画像は下の画像を使用します。

記述例
<html> <head> <title>vertical-alignプロパティの表示例</title> </head> <body> <p><img src="sample.gif" style="vertical-align: sub;">下付き文字の位置で表示します(sub)</p> <p><img src="sample.gif" style="vertical-align: super;">上付き文字の位置で表示します(super)</p> <p><img src="sample.gif" style="vertical-align: baseline;">ベースラインに要素を揃えて表示します(baseline)</p> <p><img src="sample.gif" style="vertical-align: middle;">要素を中央揃えで表示します(middle)</p> <p><img src="sample.gif" style="vertical-align: text-top;">要素の上辺をテキストの上端に揃えます(text-top)</p> <p><img src="sample.gif" style="vertical-align: text-bottom;">要素の下辺をテキストの下端に揃えます(text-bottom)</p> <p><img src="sample.gif" style="vertical-align: top;">要素の上辺を行の高さの上端に揃えにします(top)</p> <p><img src="sample.gif" style="vertical-align: bottom;">要素の下辺を行の高さの下端に揃えにします(bottom)</p> </body> </html>