CSS - text-align

トップ > CSSリファレンス > text-align

概要

属性名 text-align
[ [ left | center | right | start | end ] || <char> ] | justify | match-parent | [ start end ]
初期値 start
適用可能要素ブロック要素
継承継承する
メディアVisual / Text
サポートC1 / e3 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

説明

テキストの配置を指定します。

説明
left表示領域の左端に寄せます。(C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)
center表示領域の中央に寄せます。(C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)
right表示領域の右端に寄せます。センタリング。(C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)
start表示領域の開始側に寄せます。通常は左端になりますが、右から左に記述する言語では逆になります。(C3/Fx/Ch/Sa)
end表示領域の終了側に寄せます。通常は右端になりますが、右から左に記述する言語では逆になります。(C3/Fx/Ch/Sa)
<char>テーブルのセルで用いた場合、ここで指定した文字の位置で揃えられます。(C2)
justify均等割付されます。Internet Explorer 5.5 で実装されていますが、text-justify と共に使用し、かつ、<!DOCTYPE ...> を記述しない非標準モードでのみ動作するようです。(C2/e5.5)
match-parent親要素の属性を継承しますが、start, end は親の directionに依存しません。(C3)
start end1行目と継続行で寄せ方を変動させます。詳細未稿。(C3)

<char> は、テーブルで小数点の位置を揃える際などに利用します。サポートしているブラウザはまだ少ないようです。

td { text-align: center "."; }

text-align: center で、テキストなどのインライン要素を中央寄せすることができますが、テーブルや div などのブロック要素を中央寄せすることはできません。ブロック要素を中央寄せしたい場合は、中央寄せしたい要素自体に width で横幅を設定し、margin-right:auto; margin-left:auto; を設定してください。左右のマージンを自動(auto)にすることで、左右均等位置(中央)に表示されます。

HTML
<div style="margin-right:auto; margin-left:auto; width:100px; border:1px solid #666666; background:#ff9999">中央寄せ</div>
表示
中央寄せ

center タグと同じように、インライン要素もブロック要素も子要素をまとめて中央寄せしたい場合は、下記の様に、centerクラスの要素の子孫となるブロック要素に margin-right: automargin-left: auto を指定してください。

CSS
.center {
    text-align: center;
}
.center table,
.center div,
.center p {
    margin-right: auto;
    margin-left: auto;
}

使用例

HTML
<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>
表示
左寄せ
中央寄せ
右寄せ
均等割付
開始側寄せ
終了側寄せ

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月5日
http://www.tohoho-web.com/css/prop/text-align.htm