| 属性名 | text-align |
|---|---|
| 値 | start | end | left | right | center | justify | match-parent | justify-all |
| 初期値 | start |
| 適用可能要素 | ブロック要素 |
| 継承 | 継承する |
| メディア | Visual / Text |
| サポート | C1 / e3 / N4 / Fx1 / Ch1 / Op3.5 / Sa1 |
テキストの配置を指定します。
| 値 | 説明 |
|---|---|
| start | 表示領域の開始側に寄せます。通常は左端になりますが、右から左に記述する言語では逆になります。(C3/Fx/Ch/Sa) |
| end | 表示領域の終了側に寄せます。通常は右端になりますが、右から左に記述する言語では逆になります。(C3/Fx/Ch/Sa) |
| left | 表示領域の左端に寄せます。(C1/e3/N4/Fx1/Ch1/Op3.5/Sa1) |
| right | 表示領域の右端に寄せます。センタリング。(C1/e3/N4/Fx1/Ch1/Op3.5/Sa1) |
| center | 表示領域の中央に寄せます。(C1/e3/N4/Fx1/Ch1/Op3.5/Sa1) |
| justify | 均等割付されます。Internet Explorer 5.5 で実装されていますが、text-justify と共に使用し、かつ、<!DOCTYPE ...> を記述しない非標準モードでのみ動作するようです。(C2/e5.5) |
| match-parent | 親要素の属性を継承しますが、start, end は親の directionに依存しません。(C3) |
| justify-all | justify とほぼ同様ですが、最後の行にも justify が適用されます。(C3) |
text-align: center で、テキストなどのインライン要素を中央寄せすることができますが、テーブルや div などのブロック要素を中央寄せすることはできません。ブロック要素を中央寄せしたい場合は、中央寄せしたい要素自体に width で横幅を設定し、margin-right:auto; margin-left:auto; を設定してください。左右のマージンを自動(auto)にすることで、左右均等位置(中央)に表示されます。
<div style="margin-right:auto; margin-left:auto; width:100px; border:1px solid #666;">中央寄せ</div>
center タグと同じように、インライン要素もブロック要素も子要素をまとめて中央寄せしたい場合は、下記の様に、centerクラスの要素の子孫となるブロック要素に margin-right: auto と margin-left: auto を指定してください。
.center {
text-align: center;
}
.center table,
.center div,
.center p {
margin-right: auto;
margin-left: auto;
}
中央寄せの詳細については「センタリング(中央揃え・中央寄せ)」を参照してください。
<div style="text-align:left">左寄せ</div> <div style="text-align:center">中央寄せ</div> <div style="text-align:right">右寄せ</div> <div style="text-align:justify; text-justify:distribute-all-lines">均等割付</div> <div style="text-align:start">開始側寄せ</div> <div style="text-align:end">終了側寄せ</div>