『うぇぶくりえいた～』へのミチヾ(＠°▽°＠)ﾉ

この広告は365日以上更新がないブログに表示されます。  

超基本的なことだが、苦労したことなので覚書｡｡｡

vertical-align は、表示位置（縦方向）を指定するプロパティ。

img要素にこのスタイルを設定すると、画像に並ぶ文字の位置（縦方向）を指定できる。

例↓
<img src="example.gif" style="vertical-align:middle;">

■baseline
指定された要素内のベースラインと、親要素のベースラインを合わせます。
ベースラインが存在しない場合は、下端に合わせます。

■top
上端に合わせます。

■middle
中央に合わせます。

■bottom
下端に合わせます。

■text-top
親要素の文字の上端に合わせます。

■text-bottom
親要素の文字の下端に合わせます。

■数値+単位
baseline の位置が 0 となります。
この位置を基準に、指定した要素を上げ下げします。
正の値（上方向）、負の値（下方向）

■%
baseline の位置が 0% となります。
この位置を基準に、指定した要素を上げ下げします。
正の値（上方向）、負の値（下方向）
※行の高さ（line-heightプロパティの値）に対する割合となります。

[ベースラインとは]
英文などの場合、例えば x と y では下辺の位置が異なります。
x文字のように、下側にはみ出ていない文字の下辺のラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。