text-align-allプロパティは、ブロックコンテナ内のすべての行の揃え位置・均等割付を指定する際に使用します。
text-align-allプロパティはすべての行の揃え位置・均等割付を設定しますが、
最後の行についてはtext-align-lastプロパティで個別に値を設定することができます。
text-align-allプロパティは、そのショートハンド（短縮形）となるtext-alignプロパティに置き換えることができます。
より多くのブラウザでサポートされているtext-alignプロパティを使用するほうが良いでしょう。
■値
- start
- インラインレベルのコンテンツは、ラインボックスの始端に揃えられる（初期値）
- end
- インラインレベルのコンテンツは、ラインボックスの終端に揃えられる
- left
- インラインレベルのコンテンツは、ラインボックスの左端に揃えられる（縦書きモードではtext-orientationプロパティで指定するテキストの方向次第で上端または下端のいずれかに揃えられる）
- right
- インラインレベルのコンテンツは、ラインボックスの右端に揃えられる（縦書きモードではtext-orientationプロパティで指定するテキストの方向次第で上端または下端のいずれかに揃えられる）
- center
- インラインレベルのコンテンツは、ラインボックスの中央に配置される
- justify
- 均等割付。最後の行についてはtext-align-all-lastプロパティの指定がない限り、ラインボックスの始端に揃えられる
- justify-all
- 均等割付。最後の行も強制的に均等割付となる
- match-parent
- 親要素の値を継承する。継承した値が start または end の場合は left または right と解釈される
■初期値・適用対象・値の継承
- 初期値
- start
- 適用対象
- ブロックコンテナ
- 値の継承
- する
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample {
width:100px;
background-color:#99cc00;
}
HTMLソース
<p class="sample" style="text-align-all:start;"> text-align-all:start; を指定<br> How inline content is distributed within a line box? </p> <p class="sample" style="text-align-all:end;"> text-align-all:end; を指定<br> How inline content is distributed within a line box? </p> <p class="sample" style="text-align-all:left;"> text-align-all:left; を指定<br> How inline content is distributed within a line box? </p> <p class="sample" style="text-align-all:right;"> text-align-all:right; を指定<br> How inline content is distributed within a line box? </p> <p class="sample" style="text-align-all:center;"> text-align-all:center; を指定<br> How inline content is distributed within a line box? </p> <p class="sample" style="text-align-all:justify;"> text-align-all:justify; を指定<br> How inline content is distributed within a line box? </p> <p class="sample" style="text-align-all:justify-all;"> text-align-all:justify-all; を指定<br> How inline content is distributed within a line box? </p> <p class="sample" style="text-align-all:match-parent;"> text-align-all:match-parent; を指定<br> How inline content is distributed within a line box? </p>
ブラウザ上の表示
text-align-all:start; を指定
How inline content is distributed within a line box?
text-align-all:end; を指定
How inline content is distributed within a line box?
text-align-all:left; を指定
How inline content is distributed within a line box?
text-align-all:right; を指定
How inline content is distributed within a line box?
text-align-all:center; を指定
How inline content is distributed within a line box?
text-align-all:justify; を指定
How inline content is distributed within a line box?
text-align-all:justify-all; を指定
How inline content is distributed within a line box?
text-align-all:match-parent; を指定
How inline content is distributed within a line box?