cssプロパティvertical-alignの説明

こんにちは tanaka です。

今回は、
cssプロパティ
vertical-align の説明です。

vertical-alignは、
2つの機能があるプロパティです。

 1:通常用
    1行中の
    親要素のfont-size、line-heightなど
    を基準に
    子要素の文字、画像の上下位置を決める。

 2:テーブル用
    テーブルセルの文字の
    上下位置を決める。


vertical-alignは、
display:block
では使えません。


vertical-alignの値は、
通常用とテーブル用とで違います。

vertical-align通常用の
値は8つあります。

 1:top    = 行で最も上
 2:text-top  = 親要素の文字の上
 3:super   = 親要素の上付き文字
 4:middle   = 中央ではない中央
 5:baseline  = 親要素のベースライン(デフォルト)
 6:text-bottom = 親要素の文字の下
 7:sub    = 親要素の下付き文字
 8:bottom   = 行で最も下

画像blog-vertical-align01

vertical-alignテーブル用の
値は4つあります。

 1:baseline  = 上
 2:top    = 上
 3:middle  = 中央(デフォルト)
 4:bottom  = 下

画像blog-vertical-align02

それでは、
詳しく説明していきます。

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

vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

vertical-alignの説明

vertical-alignとは

vertical-alignは、
2つの機能があるプロパティです。

 1:通常用
    1行中の
    親要素のfont-size、line-heightなど
    を基準に
    子要素の文字、画像の上下位置を決める。

 2:テーブル用
    テーブルセルの文字の
    上下位置を決める。

1:vertical-align通常用

vertical-align通常用は、
テーブル以外で使用します。

vertical-alignは、
1行中の
親要素のfont-size、line-heightなど
を基準に
子要素の文字、画像の上下位置を決める。

すごく難しく聞こえますが、

要するに
vertical-alignは、
大きい文字に対して
 ・小さい文字
 ・小さい画像
の上下位置を決めるプロパティです。

画像blog-vertical-align03

vertical-alignでよく誤解を受けるのが、

heightの範囲で文字を
動かそうとすることです。

残念ながら
vertical-alignは、
heightとは関係がありません

関係あるのは、
line-heightまでです。

画像blog-vertical-align01

vertical-alignは、
文字が横並びにならない
display: block
では、使えません。

vertical-alignは、
文字、画像が1行になる
display:inline
display:inline-block
でしか使えません。

vertical-align通常用の値

vertical-align通常用の
値は8つあります。

 1:top    = 行で最も上
 2:text-top  = 親要素の文字の上
 3:super   = 親要素の上付き文字
 4:middle   = 中央ではない中央
 5:baseline  = 親要素のベースライン(デフォルト)
 6:text-bottom = 親要素の文字の下
 7:sub    = 親要素の下付き文字
 8:bottom   = 行で最も下

画像blog-vertical-align01
vertical-align: top;
vertical-align: text-top;
vertical-align: super;
vertical-align: middle;
vertical-align: baseline;
vertical-align: text-bottom;
vertical-align: sub;
vertical-align: bottom;
1:vertical-align: top = 行で最も上

vertical-align: topは、
少し特殊な値です。

vertical-alignのほとんどは、
親要素を基準にしています。

しかし、
vertical-align: topは、
親要素とは関係なく、
その行の最も高い位置(line-height)
へ上置きされます。

注意)
バックスクリーンはline-height

画像blog-vertical-align04
画像blog-vertical-align05
vertical-align: top;
2:vertical-align: text-top = 親要素の文字の上

vertical-align: text-topは、
親要素のfont-sizeの上
を基準に上置きします。

画像blog-vertical-align06
vertical-align: text-top;
3:super = 親要素の上付き文字

vertical-align: superは、
親要素のsuperscript(スーパースクリプト)
を基準に上置きします。

superscript(スーパースクリプト)= 上付き文字のこと

画像blog-vertical-align07
vertical-align: super;
4:middle = 中央ではない中央

vertical-align: middleは、
親要素のbaselineへ
英文小文字の半分の大きさを足した所

を基準に中央置きします。

英文では
いい感じに中央へ来るのですが、
日本語では少し下気味に置かれます。

文字を中央へ置く場合は、
vertical-alignを使うより、

必ず文字が真ん中にくる、
line-heightを使う方が良いでしょう

どうしても
vertical-alignを使って
中央にする必要がある時は、
px、%で位置を合わせるのも良いでしょう。

画像blog-vertical-align08
vertical-align: middle;
5:baseline = 親要素のベースライン(デフォルト)

vertical-align: baselineは、
親要素のbaseline
を基準に下置きします。(デフォルト)

画像blog-vertical-align09
vertical-align: baseline;
6:text-bottom = 親要素の文字の下

vertical-align: text-bottomは、
親要素のfont-sizeの下
を基準に下置きします。

画像blog-vertical-align10
vertical-align: text-bottom;
7:sub = 親要素の下付き文字

vertical-align: subは、
親要素のsubscript(サブスクリプト)
を基準に下置きします。

subscript(サブスクリプト)= 下付き文字のこと。

画像blog-vertical-align11
vertical-align: sub;
8:bottom = 行で最も下

vertical-align: bottomは、
少し特殊な値です。

vertical-alignのほとんどは、
親要素を基準にしています。

しかし、
vertical-align: bottomは、
親要素とは関係なく、
その行の最も低い位置(line-height)
へ下置きされます。

注意)
バックスクリーンはline-height

画像blog-vertical-align12
画像blog-vertical-align13
vertical-align: bottom;

2:テーブル用

vertical-alignのテーブル用は、
テーブルセルの文字に対して使用します。

vertical-alignテーブル用の値

vertical-alignのテーブル用の
値は4つあります。

 1:baseline
 2:top
 3:middle(デフォルト)
 4:bottom

画像blog-vertical-align02
vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

まとめ

vertical-alignとは

vertical-alignは、
2つの機能があるプロパティです。

 1:通常用
    1行中の
    親要素のfont-size、line-heightなど
    を基準に
    子要素の文字、画像の上下位置を決める。

 2:テーブル用
    テーブルセルの文字の
    上下位置を決める。

1:通常用

vertical-align通常用は、
テーブル以外で使用する。

vertical-alignは、
1行中の
親要素のfont-size、line-heightなど
を基準に
子要素の文字、画像の上下位置を決める。


vertical-alignでよく誤解を受けるのが、

heightの範囲で文字を
動かそうとすること。

残念ながら
vertical-alignは、
heightと関係がない

関係あるのは、
line-heightまで。


vertical-alignの通常用の
値は8つ。

 1:top    = 行で最も上
 2:text-top  = 親要素の文字の上
 3:super   = 親要素の上付き文字
 4:middle   = 中央ではない中央
 5:baseline  = 親要素のベースライン
 6:text-bottom = 親要素の文字の下
 7:sub    = 親要素の下付き文字
 8:bottom   = 行で最も下

画像blog-vertical-align01
vertical-align: top;
vertical-align: text-top;
vertical-align: super;
vertical-align: middle;
vertical-align: baseline;
vertical-align: text-bottom;
vertical-align: sub;
vertical-align: bottom;
2:テーブル用

vertical-alignテーブル用は、
テーブルセルの文字に対して使用する。


vertical-alignのテーブル用の
値は4つ。

 1:baseline
 2:top
 3:middle(デフォルト)
 4:bottom

画像blog-vertical-align02
vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

以上、
vertical-align
の話でした。

ありがとうございました。

タイトルとURLをコピーしました