CSS vertical-align 属性

定義と使用方法

vertical-align 属性は、要素の垂直配置方法を設定します。

説明

この属性は、行内要素のベースラインがその要素の行のベースラインに対してどのように垂直に配置されるかを定義します。負の長さ値やパーセンテージ値を指定することができます。これにより、要素が下がるのではなく上がるようになります。テーブルセルでは、この属性はセルフレーム内のセルコンテンツの配置方法を設定します。

参照：

CSS チュートリアル：CSS 文本

HTML DOM リファレンスマニュアル：verticalAlign 属性

例

画像の垂直配置：

img
  {
  vertical-align:text-top;
  }

実際に試してみる

CSS 言語

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

属性値

値 説明
baseline デフォルト。要素は親要素の基線に配置されます。
sub テキストの下標を垂直に配置する。
super テキストの上標を垂直に配置する
top 要素の顶端を行の中で最も高い要素の顶端に配置します。
text-top 要素の顶端を親要素のフォントの顶端に配置します。
middle この要素を親要素の中間に配置します。
bottom 要素の顶端を行の中で最も低い要素の顶端に配置します。
text-bottom 要素の底端を親要素のフォントの底端に配置します。
length 　
% この要素を配置するために、"line-height" 属性のパーセンテージ値を使用します。負の値も使用できます。
inherit 親要素から vertical-align 属性の値を継承するべきことを定義しています。

技術的詳細

デフォルト値： baseline
継承性： no
バージョン： CSS1
JavaScript 言語： object.style.verticalAlign="bottom"

他の例

垂直に配置する画像
テキスト内に垂直に配置する方法を示しています。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0