Go to information

text-align

text-alignプロパティはブロック要素、及び表のセル要素に含まれるテキストや画像などのインライン(行内)の内容の水平方向の揃え方を指定します。横幅の指定されたブロック要素自身の水平方向の揃え方には marginプロパティを応用します。

初期値
UA の設定、及びデフォルト言語の書字方向に依存
適用対象
継承
する
メディア
visual

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

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

"justify" の両端揃えは複数行からなる長い段落であった場合に、最終行を除く各行の両端(行頭・行末)が揃うように文字間隔、及び単語間隔を調整して文章を読みやすく整えて表示します。両端揃えは単語の間にある半角スペースの幅を広げて調整を行っているため、単語を半角スペースで区切るような欧文のみを対象とします。ただし、Windows版Internet Explorer には独自拡張されている text-justifyプロパティを加えることで、日本語のように単語を半角スペースで区切らない和文等においても両端揃えを適用することができます(Firefox 1.5 のバージョンより text-alignプロパティに "justify" を指定するだけで和文における文章の両端揃えにも対応しています)。

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

Windows版Internet Explorer
Firefox
Opera
Safari
Macintosh版Internet Explorer 5

Windows版Internet Explorer 6 のバグ

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 以上にしか反映されません。

現在位置
  1. W3G
  2. CSS
  3. テキスト
  4. text-align
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:53:53+09:00
更新
2008-12-29T04:30:40+09:00
URI
http://w3g.jp/css/text/text-align
検索