text-align
は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 vertical-align
のように、ただし水平方向に動作します。
構文
/* キーワード値 */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
/* 表の列における文字ベースの配置 */
text-align: ".";
text-align: "." center;
/* ブロック配置の値 (標準外の構文) */
text-align: -moz-center;
text-align: -webkit-center;
/* グローバル値 */
text-align: inherit;
text-align: initial;
text-align: unset;
text-align
プロパティは、以下の方法のうちの一つで指定されます。
値
start
- 書字方向が左から右であれば
left
と、右から左であればright
と同じです。 end
- 書字方向が左から右であれば
right
と、右から左であればleft
と同じです。 left
- インラインコンテンツは行ボックスの左辺に寄せられます。
right
- インラインコンテンツは行ボックスの右辺に寄せられます。
center
- インラインコンテンツは行ボックス内で中央寄せされます。
justify
- インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。
justify-all
justify
と同じですが、最終行も強制的に両端揃えされます。match-parent
inherit
に似ていますが、start
とend
値が親要素のdirection
に従って計算され、適切なleft
かright
値に置き換えられます。<string>
- 表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。
アクセシビリティの考慮
両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。
公式定義
初期値 | start 。start をサポートしないブラウザでは、文章の方向 が ltr なら left 、rtl なら right として動作する無名の値 |
---|---|
適用対象 | ブロックコンテナー |
継承 | あり |
計算値 | 指定値。ただし match-parent 値を除く。この値は親要素の方向にもとづいて計算され、計算値が左右どちらにもなります |
アニメーションの種類 | 個別 |
形式文法
例
左揃え
HTML
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: left;
border: solid;
}
結果
中央揃え
HTML
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: center;
border: solid;
}
結果
両端揃え
HTML
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: justify;
border: solid;
}
結果
注
インラインコンテンツを中央揃えせずにブロック自体を中央揃えする標準互換の方法は、次のように、 left 及び right margin
を auto
に設定することです。
.something {
margin: auto;
}
.something {
margin: 0 auto;
}
.something {
margin-left: auto;
margin-right: auto;
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Logical Properties and Values Level 1 text-align の定義 |
編集者草案 | 変更なし |
CSS Text Module Level 4 text-align の定義 |
編集者草案 | <string> 値を追加。 |
CSS Text Module Level 3 text-align の定義 |
草案 | start と end 、match-parent キーワードを追加。名前のなかった初期値を(まさにそれである)start に変更。 |
CSS Level 2 (Revision 1) text-align の定義 |
勧告 | 変更なし |
CSS Level 1 text-align の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser