Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

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

構文

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

start
文章の方向が左から右であれば left と、右から左であれば right と同じです。
end
文章の方向が左から右であれば right と、右から左であれば left と同じです。
left
インラインコンテンツは行ボックスの左辺に寄せられます。
right
インラインコンテンツは行ボックスの右辺に寄せられます。
center
インラインコンテンツは行ボックス内で中央寄せされます。
justify
インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように語間が空けられます。
justify-all
justify と同じですが、最終行も強制的に両端揃えされます。
match-parent
inherit に似ていますが、 startend 値が親要素の direction に従って計算され、適切な leftright 値に置き換えられます。

形式文法

start | end | left | right | center | justify | match-parent

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 Logical Properties Level 1
text-align の定義
勧告改訂案 変更なし
CSS Text Level 3
text-align の定義
草案 startendmatch-parent キーワードを追加。名前のなかった初期値を(まさにそれである)start に変更。
CSS Level 2 (Revision 1)
text-align の定義
勧告 変更なし
CSS Level 1
text-align の定義
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート(leftrightcenterjustify 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
ブロックの文字寄せ 1.0-webkit 1.0 (1.7 or earlier)-moz [1] 未サポート 未サポート 1.0 (85)-khtml
1.3 (312)-webkit [1]
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 40 (40) 未サポート 未サポート 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ? ?
ブロックの文字寄せ ? ? ? ? ? ?
start ? ? ? ? ? ?
end ? ? ? ? ? ?
match-parent ? ? 40.0 (40) ? ? ?
true(非標準の構文) 未サポート 未サポート ? 未サポート 未サポート 未サポート

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

関連情報

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

 このページの貢献者: mitsuba-clover, Sebastianz, Sheppy, omasanori, ethertank, sosleepy
 最終更新者: mitsuba-clover,