vertical-align、CSSプロパティ

CSSのプロパティにvertical-align=縦方向(垂直方向)揃えの位置指定がありますが、あまり使うことがないので、結構曖昧だったりします。

vertical-alignとは、行間中のテキストや画像を垂直方向(縦方向)の揃え位置を指定するできます。

注意点はvertical-alignプロパティが適用されるのは、インライン要素とテーブルセル内のみです。
text-align的にブロックレベル要素では無効なので、用途も限られます。

また、画像とテキストを同じブロック内に横並びで配置した場合、テキストの表示位置がブラウザによって解釈がことなるので、結局はfloatプロパティを使用する方が、確実で作業がはやかったりします。

■vertical-alignプロパティの値

・baseline
└ 適用要素ベースラインを親要素ベースラインに揃えて配置(デフォルト)
・top
└要素内の垂直方向、上端に揃える
・middle
└要素内の垂直方向、中央に揃える
・bottom
└要素内の垂直方向、下端に揃える
・text-top
└要素内テキストの上端に揃える
(テーブルセル内での指定は無効)
・text-bottom
└要素内のテキストの下端に揃える
(テーブルセル内での指定は無効)
・super
└要素内のテキスト、上付きの文字指定
(テーブルセル内での指定は無効)
・sub
└要素内のテキスト、下付きの文字指定
(テーブルセル内での指定は無効)

・パーセント(%)
└要素内の垂直方向、line-heightプロパティで指定した値に対しての割合で指定。正の数は上方向、負の数は下方向に、 ベースラインを0揃えとして配置される。

あらためて使用頻度は高くないでしょうか。