概要
CSS の text-align プロパティは、テキストのようなインラインコンテンツが、その親ブロックの中でどのように文字寄せされるのかを定義します。text-align 制御するのはそのインラインコンテンツだけで、ブロック要素自身の整列は行いません。
- 初期値
start。startをサポートしないブラウザでは、文章の方向がltrならleft、rtlなら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に似ていますが、違いは、startとend値が親要素のdirectionに従って計算されることと、妥当なleftかright値で置き換えられることです。
例
実際の表示例
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 Text Level 3 The definition of 'visibility' in that specification. |
草案 | start と end キーワードを追加。名前のなかった初期値を 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 |
|---|---|---|---|---|---|
基本サポート（left、right、center、justify） |
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、center、right をサポートしています。これは表（テーブル）関連要素に legacy な align 属性を実装する際に使われます。ウェブサイトの製作では使わないでください。