vertical-align
テキストの縦位置を指定するプロパティ。
値により、インライン要素内でのテキストや画像の縦位置を指定することができる。
値
| top | テキスト等の上部に揃える。 |
|---|---|
| middle | テキスト等の中央に揃える。 |
| bottom | テキスト等の下部に揃える。 |
| text-top | 親ボックスのテキストの上部に揃える。 |
| text-bottom | 親ボックスのテキストの下部に揃える。 |
| super | 上付き文字として揃える。 |
| sub | 下付き文字として揃える。 |
| baseline | 基準値。何も指定していない場合、これが標準となる。 |
| 数値で指定 | px、pt、em等の単位で指定。ベースラインを基準に数値で指定する。 |
| ％で指定 | line-heightで指定した値に対する割合を％で指定。 |
使用例 - サンプル(A) / サンプル(B)
サンプル(A)
[CSSの記述]
.sampleA { vertical-align:top; }
[HTMLの記述]
<img alt="" src="hogehoge.gif" class="sampleA" />
[ブラウザ上の表示]
imgタグに値topを指定した場合。
サンプル(B)
[CSSの記述]
.sampleA { vertical-align:middle; }
[HTMLの記述]
<img alt="" src="hogehoge.gif" class="sampleB" />
[ブラウザ上の表示]
imgタグに値middleを指定した場合。
- 前の記事：text-align
- 次の記事：text-decoration