Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    vertical-align

    概要

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

    • 初期値baseline
    • 適用対象インラインレベルとテーブルセル要素
    • 継承しない
    • 相対値の基準要素自身の行の高さ
    • メディアvisual
    • 計算値パーセンテージか長さを指定すると絶対的な値、それ以外は指定されたキーワード
    • アニメーションの可否可、長さとして可能
    • 正規順序形式文法で定義される一意のあいまいでない順序

    構文

    形式文法: 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;
    }

    仕様

    仕様書 策定状況 コメント
    CSS Transitions 草案 visibility をアニメーション可能として定義。
    CSS Level 2 (Revision 1) 勧告 <length> 値を追加し、displaytable-cell である要素で使えるようにした
    CSS Level 1 勧告 初回定義。

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 4.0 4.0 1.0 (85)
    機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 1.0 1.0 1.0 (1.0) (有) (有) 1.0

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す