CSS3

プロパティ

text-align

[Edge]△。→●、mdn

テキストの整列： 略式プロパティ。

この略式プロパティは、［text-align-all、text-align-last］プロパティを設定し、ブロックの行内レベルの内容が、行ボックスを完全に埋めない場合に、行内軸方向に整列される方法について述べる。［justify-all、match-parent］以外の値は、text-align-all にあてがわれ text-align-last を auto に設定し直す。

<DIV style="font-size:20px; border:1px solid red; width:150px;
 text-align:justify end;
">ab c def ghi jk<BR>ああ いい うううううう
</DIV>

start

行内レベルの内容は、行ボックスの始端辺に整列される。

<DIV style="border:1px solid red; width:150px;
 text-align:start;
">あいう</DIV>

<DIV style="border:1px solid red; height:150px;
 writing-mode:vertical-rl;
 text-align:start;
">あいう</DIV>

end

行内レベルの内容は、行ボックスの終端辺に整列される。

<DIV style="border:1px solid red; width:150px;
 text-align:end;
">あいう</DIV>

<DIV style="border:1px solid red; height:150px;
 writing-mode:vertical-rl;
 text-align:end;
">あいう</DIV>

left

行内レベルの内容は、行ボックスの行左端に整列される。（縦組みにおいては、writing-mode に依存して、物理的な［上端、下端］どちらにもなり得る。）[CSS-WRITING-MODES-4]

<DIV style="border:1px solid red; width:150px;
 text-align:left;
">あいう</DIV>

<DIV style="border:1px solid red; height:150px; width:100px;
 writing-mode:vertical-rl;
 text-align:left;
">あいう</DIV>

right

行内レベルの内容は、行ボックスの行右端に整列される。（縦組みにおいては、writing-mode に依存して、物理的な［上端、下端］どちらにもなり得る。）[CSS-WRITING-MODES-4]

<DIV style="border:1px solid red; width:150px;
 text-align:right;
">あいう</DIV>

<DIV style="border:1px solid red; height:150px; width:100px;
 writing-mode:vertical-rl;
 text-align:right;
">あいう</DIV>

center

行内レベルの内容は、行ボックスの中で中央寄せにされる。

<DIV style="border:1px solid red; width:150px;
 text-align:center;
">あいう</DIV>

<DIV style="border:1px solid red; height:150px; width:100px;
 writing-mode:vertical-rl;
 text-align:center;
">あいう</DIV>

justify

テキストは、行ボックスを正確に埋めるために、text-justify プロパティにより指定されるメソッドに則って両端揃えにされる。ただし、［強制分断の直前にある行、および ブロックの最終行］では、text-align-last により 他が指定されない限り、start と同じく始端に整列される。

<DIV style="font-size:20px; border:1px solid black; width:150px;
">ab c def ghi jk<BR>あい うえ おかき
</DIV>

未設定

<DIV style="font-size:20px; border:1px solid red; width:150px;
 text-align:justify;
">ab c def ghi jk<BR>あい うえ おかき
</DIV>

justify-all

［text-align-all、text-align-last］とも justify に設定して、最後の行も両端揃えにするよう強制する。

<DIV style="font-size:20px; border:1px solid red; width:150px;
 text-align:justify-all;
">ab c def ghi jk<BR>あい うえ おかき
</DIV>

match-parent

この値は、inherit と同じにふるまう（親の算出値に算出される） ― ただし、継承値が［start／end］の場合は、親（親が無い場合は初期包含ブロック）の direction 値を基準に解釈され、結果の算出値は［left または right］になる。

text-align 略式プロパティに指定された場合、［text-align-all、text-align-last］両プロパティとも match-parent に設定する。

<DIV style="border:1px solid black;
 text-align:end;
">
 <DIV style="font-size:20px; border:1px solid red; width:150px;
  text-align:match-parent;
 ">ab c def ghi jk<BR>あい うえ おかき
 </DIV>
</DIV>

<DIV style="border:1px solid black;
 direction:rtl;
">
 <DIV style="font-size:20px; border:1px solid red; width:150px;
  text-align:match-parent;
 ">ab c def ghi jk<BR>あい うえ おかき
 </DIV>
</DIV>

テキストのブロックは、いくつかの行ボックスの堆積である。
このプロパティは、各 行ボックスの中の行内レベルのボックスたちを、行ボックスの［始端、終端］側を基準に整列する方法を指定する。
整列は表示域や包含ブロックを基準にはしない。

justify の事例では、ユーザー エージェントは、各 行内レベルのボックスに対し、そのテキストを調整することにより、伸張／縮短してもよい（text-justify を見よ）。
要素の空白が縮約可能でない場合、両端揃えの目的においては、そのテキストを調整することは要求されない ― ユーザー エージェントは、テキストを両端揃え機会を持たないものと扱ってもよい。
ユーザー エージェントは、テキストを調整することを選ぶならば、空白処理規則から要求されるように、各 タブ停が揃い続けることを確保するものとする。

（両端揃えがあればその後で）行内内容が行ボックスに収まるには長過ぎる場合、内容は、始端に整列される ― 収まらない内容は、行ボックスの終端辺を過フローする。

行ボックスの始端、終端辺を決定する方法の詳細は、§ 双方向性と行ボックス を見よ。

テスト