WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > vertical-align
vertical-align  文字 

縦方向の位置揃え。

このエントリーをはてなブックマークに追加

vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。

SPANタグには使用できますが、DIVタグやPタグには使用できません。

vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。
baseline
適用した要素のベースラインを親要素のベースラインに揃える（初期値）

top
上端揃え
middle
中央揃え
bottom
下端揃え
text-top
テキストの上端揃え（テーブルセルへの指定は無効）
text-bottom
テキストの下端揃え（テーブルセルへの指定は無効）
super
上付き文字（テーブルセルへの指定は無効）
sub
下付き文字（テーブルセルへの指定は無効）
パーセント（%）
その要素のline-heightプロパティの値に対する割合を%で指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動）
数値＋単位
数値にemやexやpxなどの単位をつけて指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動）
<img src="/img/enoki5.jpg" style="vertical-align:baseline;" />
vertical-align:baseline;
<hr class="hr_none" />
<img src="/img/enoki5.jpg" style="vertical-align:top;" />
vertical-align:top;
<hr class="hr_none" />
<img src="/img/enoki5.jpg" style="vertical-align:middle;" />
vertical-align:middle;
<hr class="hr_none" />
<img src="/img/enoki5.jpg" style="vertical-align:bottom;" />
vertical-align:bottom;
<hr class="hr_none" />
<img src="/img/enoki5.jpg" style="vertical-align:text-top;" />
vertical-align:text-top;
<hr class="hr_none" />
<img src="/img/enoki5.jpg" style="vertical-align:text-bottom;" />
vertical-align:text-bottom;
<hr class="hr_none" />
<img src="/img/enoki5.jpg" style="vertical-align:super;" />
vertical-align:super;
<hr class="hr_none" />
<img src="/img/enoki5.jpg" style="vertical-align:sub;" />
vertical-align:sub;

vertical-align:baseline;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;
vertical-align:text-top;
vertical-align:text-bottom;
vertical-align:super;
vertical-align:sub;

<span style="height:50px;background-color:#eee;vertical-align:baseline;">vertical-align:top;</span>
<span style="height:50px;background-color:#eee;vertical-align:top;">vertical-align:top;</span>
<span style="height:50px;background-color:#eee;vertical-align:middle;">vertical-align:middle;</span>
<span style="height:50px;background-color:#eee;vertical-align:bottom;">vertical-align:bottom;</span>
<span style="height:50px;background-color:#eee;vertical-align:text-top;">vertical-align:text-top;</span>
<span style="height:50px;background-color:#eee;vertical-align:text-bottom;">vertical-align:text-bottom;</span>
<span style="height:50px;background-color:#eee;vertical-align:super;">vertical-align:super;</span>
<span style="height:50px;background-color:#eee;vertical-align:sub;">vertical-align:sub;</span>

vertical-align:baseline;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;
vertical-align:text-top;
vertical-align:text-bottom;
vertical-align:super;
vertical-align:sub;


<table border="1">
<tr>
<td style="vertical-align:baseline;">baseline;</td>
<td style="vertical-align:top;">top;</td>
<td style="vertical-align:middle;">middle;</td>
<td style="vertical-align:bottom;">bottom;</td>
<td style="vertical-align:text-top;">text-top;</td>
<td style="vertical-align:text-bottom;">text-bottom;</td>
<td style="vertical-align:super;">super;</td>
<td style="vertical-align:sub;">sub;</td>
</tr>
</table>
baseline; top; middle; bottom; text-top; text-bottom; super; sub;

H20 H20