vertical-align
CSSの書き方
vertical-align:値 ;
CSSの詳細情報 | |||||
---|---|---|---|---|---|
プロパティ名 | vertical-align | 読み方 | ヴァーティカル・アライン | ||
初期値 | baseline/0 | 意味 | 縦方向文字揃え | ||
値 | baseline/top/middle/bottom/super/sub/text-top/text-bottom/サイズ | ||||
対象 | インライン要素 | ||||
CSSレベル | CSSレベル1 | 対応ブラウザ | Windows | MAC | |
継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 |
解説
縦方向を文字揃えを調節するプロパティです。
例えば、文字の大きさの異なる文字や、英字と漢字など、文字の高さが異なる文字が含まれる文章の文字揃えを縦方向に調整します。
「baseline」など、予め決まっているキーワードとサイズによる数値指定が可能です。
初期値はベースライン
この「vertical-align」プロパティの初期値はベースラインです。
ベースラインとは、アルファベット字体の底辺の位置のことを指します。
通常「baseline」のようにアルファベットはこのベースラインを基本として文字が揃えられます。
キーワードによる指定
「vertical-align」プロパティで指定できるキーワードは以下の表のようになります。
キーワード | 内容 |
---|---|
baseline | ベースラインを基本 |
top | 上揃え |
middle | 中央揃え |
bottom | 下揃え |
super | 上付き |
sub | 下付き |
text-top | テキストの上端揃え |
text-bottom | テキストの下端揃え |
数値による指定
数値による指定は、ピクセルやパーセントで指定できます。
基準となる位置は初期値のベースラインで、正(プラス)の値を入れれば、上方向にずれ、負(マイナス)の値を挿入すると、下方向にずれます。
パーセントで指定する場合、ベースラインは「0%」です。
パーセントは正の値で記入します。
また、パーセントは相対的な数字ですから、基準となる長さは「line-height」プロパティの設定値になります。
ブラウザの対応状況
上で挙げたキーワードや数値による指定が、すべてのWEBブラウザで対応してるわけではありません。
各ブラウザの対応状況については以下の表を参照してください。
値 | IE5.0 | IE5.5 | IE6.0 | NS7.1 | FF1.0 | OP8.0 | SF | MAC IE5.0 |
---|---|---|---|---|---|---|---|---|
baseline | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
top | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
middle | × | ○ | ○ | × | × | × | ○ | × |
bottom | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
super | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
sub | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
text-top | × | ○ | ○ | × | × | × | ○ | × |
text-bottom | × | ○ | ○ | × | × | × | ○ | × |
数値 | × | × | ○ | ○ | ○ | ○ | ○ | ○ |
※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P127、2005
CSS/HTMLサンプル
span.eng { vertical-align:super; }
SPAN要素にクラスで縦方向の文字揃えを指定 サンプル