text-alignプロパティ。
CSSに於ける行揃えの指定・text-alignプロパティに関する解説です。
text-alignプロパティとは。
text-alignプロパティは、行揃えの指定です。
具体的には、
- 左に揃えるか
- 右に揃えるか
- センタリングするか
- 行の幅が揃うように配置するか
などの指定です。
尚、仕様としては、text-alignプロパティはあくまでも内容となるテキスト(インライン要素)のみを対象としているので、内容となるブロックレヴェル要素の配置には影響を与えません。
text-alignプロパティの書式。
text-alignプロパティの書式は、以下のようになります。
text-align: 値値としては、以下のものが取れます。
inherit- 一番近い上位要素で指定された値を継承します。
left- 左に揃えます。
right- 右に揃えます。
center- 中央に揃えます(センタリング)。
justify- 左右両端に揃えます。つまり、行の幅が揃うように配置します。但し、この値を実装しない場合、或いは実現出来ない場合(letter-spacingプロパティに値を指定している場合など)に、言語の書字方向に従って右か左に揃えても構わない事になっております。
- 文字列
- 表(テーブル)内の要素に限り、行揃えの基準となる文字列を指定出来ます。例えば
th, td {text-align: ".";}とした場合、コマ内の「.」(小数点)が一列に揃うように配置します。
尚、表(テーブル)内の要素以外にこの値を適用した場合は、デフォルト値、すなわち言語の書字方向に従った配置が適用されます。
尚、text-alignプロパティのデフォルト値は言語の書字方向に従います。
例えば、現代日本語など左から書く言語ではleft値がデフォルトとなります。
text-alignプロパティに関する注意事項。
text-alignプロパティの仕様上の注意。
text-alignプロパティは内容となるブロックレヴェル要素を行揃えしません。
HTMLでの<div>要素などのalign属性と違って、内容となるテキスト(インライン要素)のみが行揃えの対象となります。
従って、内容となるブロックレヴェル要素は行揃えの対象とならないのが正しい実装です。
しかしながら、間違った実装となっているユーザエージェントも意外に多いのが実情です。
- 詳しくは、text-alignプロパティの実装上の注意点をお読み下さい。
尚、ブロックレヴェル要素の位置揃えは、当該要素の左右の余白を調整する事で実現します。
- 具体的には、widthプロパティで横幅を指定し、marginプロパティで左右にauto値を与える事でセンタリングします。
text-alignプロパティの実装上の注意。
日本語文書を扱う場合の注意事項。
殆どのブラウザでは日本語文字を扱う場合にはjustify値は両端揃えにならず、左寄せとなります。
- 英語などでは問題は起こらない場合が多いようです。
- 尚、この挙動は仕様違反ではありません。justify値をサポートしない代わりに記述言語に合わせて行揃えを行っても良い事となっているからです。
インターネットエクスプローラでの注意事項。
インターネットエクスプローラでは、以下の例外を除いて、内容となるブロックレヴェル要素も行揃えの対象となります。
- マッキントッシュ版 5.x及びウィンドウズ版 6.x以降で、標準準拠モードとなっている場合。