text-align CSS プロパティは、テキストのようなインラインコンテンツが、その親ブロックの中でどのように文字寄せされるのかを定義します。text-align が制御するのはそのインラインコンテンツだけで、ブロック要素の配置は制御しません。
| 初期値 | start。start をサポートしないブラウザでは、文章の方向が ltr なら left、rtl なら right として動作する無名の値 |
|---|---|
| 適用対象 | ブロックコンテナ |
| 継承 | 継承する |
| メディア | visual |
| 計算値 | 指定値。ただし match-parent 値を除く。この値は親要素の方向にもとづいて計算され、計算値が左右どちらにもなります |
| Animation type | discrete |
| 正規順序 | 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-alljustifyと同じですが、最終行も強制的に両端揃えされます。match-parentinheritに似ていますが、startとend値が親要素のdirectionに従って計算され、適切なleftかright値に置き換えられます。
形式文法
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...実際の表示例
注記
インラインコンテンツの中央寄せを行わずにブロックを中央寄せする標準互換の方法は、左右の margin を auto にすることです。例: margin: auto; または margin: 0 auto; または margin-left: auto; margin-right: auto;
仕様書
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Logical Properties Level 1 text-align の定義 |
勧告改訂案 | 変更なし |
| CSS Text Module Level 3 text-align の定義 |
草案 | start と end、match-parent キーワードを追加。名前のなかった初期値を（まさにそれである）start に変更。 |
| CSS Level 2 (Revision 1) text-align の定義 |
勧告 | 変更なし |
| CSS Level 1 text-align の定義 |
勧告 | 初回定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
基本サポート（left と right、center、justify） |
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 は、インラインコンテンツだけでなくブロック要素にも適用される、プレフィックス版の left、center、right をサポートしています。これはレガシーな表（テーブル）関連要素の align 属性と <center> を実装する際に使われています。ウェブサイトの製作では使わないでください。