vertical-align

概要

CSS の vertical-align プロパティは、インラインまたはテーブルセル要素の、縦方向の整列方法を定義します。

構文

形式文法: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

vertical-align: baseline     /* キーワード値 */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom
vertical-align: 10em          /* <length> */
vertical-align: 4px
vertical-align: 20%           /* <percentage> */

vertical-align: inherit

値（インライン要素用）

ほとんどの値は親要素を基準に、縦方向に要素を整列します:

baseline

要素の baseline を親要素の baseline に揃えます。<textarea> のような、いくつかの 置換要素 の baseline は HTML 仕様で未定義で、このため、このキーワードの挙動はブラウザにより異なるかもしれません。

sub

要素の baseline を親要素の subscript-baseline に揃えます。

super

要素の baseline を親要素の superscript-baseline に揃えます。

text-top

要素の top を親要素のフォントの top に揃えます。

text-bottom

要素の bottom を 親要素のフォントの bottom に揃えます。

middle

要素の middle を親要素の小文字の middle に揃えます。

<length>

要素の baseline を、親要素の baseline の指定値分上に揃えます。

<percentage>

<length> 値と似ていますが、line-height プロパティに対するパーセンテージで指定します。

(<length> と <percentage> には、負の値を使えます)

次の 2 つの値は、親要素ではなく、行全体を基準に縦方向の整列を行います:

top

要素と子孫要素の top を行全体の top に揃えます。

bottom

要素と子孫要素の bottom を行全体の bottom に揃えます。

baseline を持たない要素では、代わりに bottom のマージン境界が使われます。

値（テーブルセル用）

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)

セルの baseline を、baseline 揃えをされた行にある他のすべてのセルの baseline に揃えます。

top

セルの top のパディング境界を行の top に揃えます。

middle

セルのパディングボックスが行の中央になるようにします。

bottom

セルの bottom のパディング境界を行の bottom に揃えます。

負の値を使えます。

例

img {
  vertical-align: bottom;
}

仕様

ブラウザ実装状況

関連情報

• line-height, text-align, margin

• Understanding vertical-align, or "How (Not) To Vertically Center Content"