CSS text-align 属性

定義と使用法

text-align 属性は、要素内のテキストの水平アライメントを指定します。

この属性は、行フレームとどのポイントを対齐するかを指定することで、ブロック要素内のテキストの水平アライメントを設定します。行内容中の文字とスペースの間隔をユーザーエージェントに調整することで、justify値をサポートできます；異なるユーザーエージェントでは異なる結果が得られます。

も参照してください：

CSS チュートリアル：CSS 文本

HTML DOM リファレンスマニュアル：textAlign 属性

例

h1、h2、h3要素のテキストアライメントを設定します：

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

自分で試してみてください

CSS 文法

text-align: left|right|center|justify|initial|inherit;

属性値

値 説明
left テキストを左に配置します。デフォルト値：ブラウザによって決定されます。
right テキストを右に配置します。
center テキストを中央に配置します。
justify 両端揃えテキスト効果を実現します。
inherit 親要素の text-align 属性の値を継承します。

値 justify

最後の水平アライメント属性は justify で、自分自身の問題を引き起こします。

値 justify は、テキストの両端を揃えることができます。両端揃えテキストでは、テキスト行の両端が親要素の内側端に配置されます。それから、単語とアルファベット間のスペースを調整して、各行の長さが同じになるようにします。両端揃えテキストは印刷物でよく見られますが、CSSではさらに考慮する必要があります。

両端揃えテキストがどうやって広がって親要素の左右端の間のスペースを埋めるかは、ユーザーエージェント（CSSではなく）で決定されます。例えば、一部のブラウザは単語間に追加のスペースを増やすだけでなく、他のブラウザはアルファベット間の追加スペースを均等に分布させることがあります（ただし、CSS規範では、特定の条件を満たさない場合を除いて、特に指摘しています）。 letter-spacing 属性長さの値として指定すると、「ユーザーエージェントは文字間のスペースをさらに増加または減少させることができません」）。また、一部のユーザーエージェントは、テキストをより詰め込むために行のスペースを減少させることもあります。これらの方法はすべて要素の見た目に影響を与え、ユーザーエージェントのアライメント選択がどれだけ多くのテキスト行に影響を与えるかによって、要素の高さを変更する可能性があります。

CSSではハイフンの扱い方法も指定されていません（注1）。ほとんどの両端揃えテキストでは、長い単語をハイフンで区切って二行に分けて配置し、行間のスペースを縮小してテキストの見た目を改善します。しかし、CSSではハイフンの動作が定義されていないため、ユーザーエージェントが自動的にハイフンを追加する可能性は低いです。したがって、CSSでは両端揃えテキストは印刷物よりも見た目が悪く、特に行が狭すぎて一行に数文字しか入らない場合、特に見た目が悪くなります。もちろん、狭いデザイン要素を使用することはできますが、その欠点に注意してください。

注1：CSSではハイフンの扱いについて言及されていません。異なる言語ごとにハイフンのルールが異なるためです。規範は、非常に不完全な可能性のあるこれらのルールを調整しようとするのではなく、その問題を提起しません。

技術的詳細

デフォルト値： direction 属性が ltr であれば、デフォルト値は left です；rtl であれば right です。
継承性： はい
バージョン： CSS1
JavaScript 语法： object.style.textAlign="right"

さらに多くの例

テキストのアライメント
この例では、テキストのアライメント方法を示します。

ブラウザのサポート

テーブル内の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5