vertical-align - wicky @ ウィキ

vertical-align

　インライン要素またはtable-cellの要素で、テキストや画像などの縦方向の位置を指定する際に使用する。プロパティの値に単位付きの数値を指定した場合は、上方向へ移動する。line-heightプロパティの値に対するパーセンテージを指定することもできる。また、次の既定値を指定することもできる。

■vertical-alignプロパティの設定例

プロパティ	概要
baseline	親ボックスのベースラインと揃える（デフォルト）
top	上端揃え
middle	中央揃え
bottom	下端揃え
text-top	テキストの上端に揃える
text-bottom	テキストの下端に揃える
super	親ボックスの上付き文字の位置に揃える
sub	親ボックスの下付き文字の位置に揃える

　vertical-alignプロパティを画像に対して設定した例を以下に示す。

●vertical-alignプロパティの設定例１

img { vertical-align : middle; }

●HTMLのサンプル１

<p>
<img class="note" src="youkai.jpg" alt="妖怪画像">
    春の新作妖怪
</p>

　vertical-alignプロパティをテキストに対して設定した例を以下に示す。

●vertical-alignプロパティの設定例２

span#soroe1 { vertical-align : text-top; }
span#soroe2 { vertical-align : text-bottom; }

●HTMLのサンプル２

<p>
    <span id="soroe2">今の</span>
    気持ちは
    <span id="soroe1">こんな</span>
    感じ
    <span id="soroe1">かもしれません</span>
</p>