text-alignプロパティはブロック要素、及び表のセル要素に含まれるテキストや画像などのインライン(行内)の内容の水平方向の揃え方を指定します。横幅の指定されたブロック要素自身の水平方向の揃え方には marginプロパティを応用します。
leftrightcenterjustifyinherittext-alignプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。
leftcenterrightjustify"justify" の両端揃えは複数行からなる長い段落であった場合に、最終行を除く各行の両端(行頭・行末)が揃うように文字間隔、及び単語間隔を調整して文章を読みやすく整えて表示します。両端揃えは単語の間にある半角スペースの幅を広げて調整を行っているため、単語を半角スペースで区切るような欧文のみを対象とします。ただし、Windows版Internet Explorer には独自拡張されている text-justifyプロパティを加えることで、日本語のように単語を半角スペースで区切らない和文等においても両端揃えを適用することができます(Firefox 1.5 のバージョンより text-alignプロパティに "justify" を指定するだけで和文における文章の両端揃えにも対応しています)。
text-alignプロパティは横幅の指定されたブロック要素自身の水平方向の揃え方を指定するものではなく、ブロック要素の内容となっているテキストや画像などのインライン内容を揃えるものです。ところが、Windows版Internet Explorer 6 においては text-alignプロパティで横幅の指定されたブロック要素自身の水平方向を揃えてしまうという正しくない実装を抱えています。いわゆる、バグです。
このバグがあるために Windows版Internet Explorer 6 でしかウェブページの表示確認を行っていない制作者に実際にはブロック要素自身の中央揃えの指定ができていないにもかかわらず、それを間違った実装の UA でしか確認していないために中央揃えができていると勘違いしてしまい、正しい実装をした UA で観覧した際にデザインが異なるケースが良くあります。本来のブロック要素の水平方向の揃え方は 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 ; }
サンプルの両端揃えは和文のため Windows版Internet Explorer 6, 7、及び Firefox 1.5 以上にしか反映されません。