vertical-align
Home>CSS>プロパティリファレンス>vertical-align
vertical-alignプロパティの役割
vertical-alignプロパティは、行における縦方向の位置を指定します。
vertical-alignプロパティに設定できる値
値 | インライン要素 | セル要素 |
baseline | 指定した要素のベースラインに揃える。 | ベースラインを最初の行のベースラインに揃える。 |
bottom | 指定した要素の下辺に揃える。 | セルの下線を最初の行の下線に揃える。 |
middle | 指定した要素のベースラインから親要素のフォントの大きさの小文字のxの高さの上半分の位置に揃える。 | セルの中心線を最初の行の中心線に揃える。 |
sub | 指定した要素のベースラインを親要素の下付き文字の位置に揃える。 | baselineが適用される。 |
super | 指定した要素のベースラインを親要素の上付き文字の位置に揃える。 | baselineが適用される。 |
text-bottom | 指定した要素の下辺を親要素のフォントの下辺に揃える。 | baselineが適用される。 |
text-top | 指定した要素の上辺を親要素のフォントの上辺に揃える。 | baselineが適用される。 |
top | 指定した要素の上辺を行中の最も高い要素の上辺に揃える。 | セルの上線を最初の行の上線に揃える。 |
インライン要素とセル要素で、値の解釈が変わります。
vertical-alignプロパティの使い方
<table>
<tr>
<td style="vertical-align:bottom"><img src="../../../data/img/global/logo.jpg" />
テキストの位置が下になる</td>
</tr></table>
![]() |
上のサンプルでは、vertical-alignプロパティをtd要素に設定しました。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-10-21