mozilla
Your Search Results

    text-align

    概要

    CSS の text-align プロパティは、テキストのようなインラインコンテンツが、その親ブロックの中でどのように文字寄せされるのかを定義します。text-align 制御するのはそのインラインコンテンツだけで、ブロック要素自身の整列は行いません。

    • 初期値startstart をサポートしないブラウザでは、文章の方向が ltr なら leftrtl なら right として動作する無名の値
    • 適用対象ブロックコンテナ
    • 継承する
    • メディアvisual
    • 計算値指定通り。ただし、 match-parent 値を除く。この値は親要素の方向にもとづいて計算され、計算値が左右どちらにもなります
    • アニメーションの可否不可
    • 正規順序形式文法での出現順

    構文

    形式文法: [ start | end | left | right | center ] || <string> ] | justify | match-parent | start end
    
    text-align: left
    text-align: right
    text-align: center
    text-align: justify
    text-align: start
    text-align: end
    text-align: match-parent
    text-align: start end
    text-align: "."
    text-align: start "."
    text-align: "." end
    
    text-align: inherit
    

    start
    文章の方向が左から右であれば left と、右から左であれば right と同じです。
    end
    文章の方向が左から右であれば right と、右から左であれば left と同じです。
    left
    インラインコンテンツは行ボックスの左辺に寄せられます。
    right
    インラインコンテンツは行ボックスの右辺に寄せられます。
    center
    インラインコンテンツは行ボックス内で中央寄せされます。
    <string>
    1文字の文字列です。最初に出現したこの文字が文字寄せの基準要素になり、この文字列の前後のキーワードが文字寄せの方法を示します。小数点のある数値を文字寄せするような使い方ができます。
    justify
    テキストは両端揃えされます。テキストは、左右の端が段落のコンテンツ境界の左右の端に揃えられるでしょう。
    match-parent
    inherit に似ていますが、違いは、startend 値が親要素の direction に従って計算されることと、妥当な leftright 値で置き換えられることです。

    実際の表示例

    div { text-align: center; border:solid; }

    p { background:gold; width:22em; }

    some more inline content...
    div { text-align: center; border:solid; }

    p { background:gold; width:22em; margin: 1em auto; }

    some more inline content...
    div { text-align:-moz-center; text-align:-webkit-center; border:solid; }

    p { background:gold; width:22em; }

    some more inline content...

    注記

    インラインコンテンツの中央寄せを行わずにブロックを中央寄せする標準互換の方法は、左右の marginauto にすることです。
    例: margin:auto; または margin:0 auto; または margin-left:auto; margin-right:auto;

    仕様書

    仕様書 策定状況 コメント
    CSS Text Level 3
    The definition of 'visibility' in that specification.
    草案 startend キーワードを追加。名前のなかった初期値を start に変更。<文字列>  値の match-parent 値と start end ダブル値を追加。
    CSS Level 2 (Revision 1)
    The definition of 'text-align' in that specification.
    勧告 変更なし
    CSS Level 1
    The definition of 'text-align' in that specification.
    勧告 初回定義

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート(leftright、centerjustify 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
    ブロックの文字寄せ [1] 1.0-webkit 1.0 (1.7 or earlier)-moz 未サポート 未サポート 1.0 (85)-khtml
    1.3 (312)-webkit
    start 1.0 1.0 (1.7 or earlier) 未サポート (有) 3.1 (525)
    end 1.0 3.6 (1.9.2) 未サポート 未サポート 3.1 (525)
    match-parent 16 未サポート 未サポート 未サポート 未サポート
    <文字列> 未サポート 未サポート 未サポート 未サポート 未サポート
    機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ? ?
    ブロックの文字寄せ [1] ? ? ? ? ? ?
    start ? ? ? ? ? ?
    end ? ? ? ? ? ?
    match-parent ? ? ? ? ? ?
    <文字列> ? ? ? ? ? ?

    [1] WebKit と Gecko は、インラインコンテンツだけでなくブロック要素にも適用される、プレフィックス版の left、centerright をサポートしています。これは表(テーブル)関連要素に legacy な align 属性を実装する際に使われます。ウェブサイトの製作では使わないでください。

    関連情報

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

    Contributors to this page: Sheppy, ethertank, omasanori, sosleepy
    最終更新者: Sheppy,