text-align

Updated 2013.10.28 / Published 2007.02.02

text-alignプロパティはブロックボックスを形成する要素、及び表のセル要素に含まれるテキストや画像などのインライン（行内）の内容の水平方向の揃え方を指定します。

text-alignプロパティが制御できるのはインライン（行内）の内容だけで、ブロックボックスそのものの整列はできないため、横幅の指定されたブロックボックスを形成する要素自身の水平方向の揃え方には marginプロパティを応用します。

値

left
right
center
justify
inherit

初期値

UA の設定、及びデフォルト言語の書字方向に依存

適用対象

継承

する

メディア

visual

text-alignプロパティの値

text-alignプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

left: インライン内容を左揃えにする
center: インライン内容を中央揃えにする
right: インライン内容を右揃えにする
justify: インライン内容を両端揃えにする

"justify" の両端揃えは複数行からなる長い段落であった場合に、最終行を除く各行の両端（行頭・行末）が揃うように文字間隔、及び単語間隔を調整して文章を読みやすく整えて表示します。当初は単語を半角スペースで区切るような欧文のみを対象に実装していたUAがほとんでしたが、最新のUAにおいては、日本語のように単語を半角スペースで区切らない和文等においても、text-alignプロパティに "justify" を指定することで両端揃えが適用されるようになっています（IEでは、独自拡張のtext-justifyプロパティに日本語向けの両端揃えを指定するtext-justify : inter-ideograph ;を加える必要があります）。

text-alignプロパティの実装状況

IE: ◯：両端揃えの場合はIE独自拡張のtext-justifyプロパティ（text-justify : inter-ideograph ;）を伴うこと
Firefox: ◯
Opera: ◯
Chrome: ◯
Safari: ◯
iOS: ◯
Android: ◯

有名なInternet Explorer 6 のtext-align : center ; バグ

text-alignプロパティは横幅の指定されたブロックボックスを形成する要素自身の水平方向の揃え方を指定するものではなく、ブロックボックスを形成する要素の内容となっているテキストや画像などのインライン内容を揃えるものです。ところが、IE6においては text-alignプロパティで横幅の指定されたブロックボックスを形成する要素自身の水平方向を揃えてしまうという正しくない実装を抱えていました。いわゆる、バグです。本来のブロックボックスを形成する要素の水平方向の揃え方は marginプロパティ（margin-left : auto ; margin-right : auto ;）によって指定します。ブロックボックスを形成する要素自身の水平方向の揃え方について詳しくは、CSS によるブロックレベル要素の左右中央揃えを参照ください。

サンプル

p           { border : 1px dotted orange ; }
.left       { text-align : left ; }
.right     { text-align : right ; }
.center  { text-align : center ; }
.justify  { text-align : justify ;
text-justify : inter-ideograph ; /* for IE */ }

和文の両端揃えには、IEでは独自拡張のtext-justifyプロパティに日本語向けの両端揃えを指定するtext-justify : inter-ideograph ;を加える必要があります。