Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

text-align

text-align は CSS のプロパティで、ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。つまり、 vertical-align と同じように機能しますが、水平方向に機能します。

テキスト配置水平揃え

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-align
1
12
1
1
18
1
center
1
79
1
≤4
18
≤3.2
end
1
79
1
3.1
18
2
justify
1
12
1
1
18
1
left
1
79
1
≤4
18
≤3.2
match-parent
16
79
40
15.4
18
15.4
right
1
79
1
≤4
18
≤3.2
start
1
79
1
3.1
18
2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1.3)
  • ベンダープレフィックス付きで対応: -khtml- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
  • ベンダープレフィックス付きで対応: -khtml- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1.3)
  • ベンダープレフィックス付きで対応: -khtml- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
  • ベンダープレフィックス付きで対応: -khtml- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1.3)
  • ベンダープレフィックス付きで対応: -khtml- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
  • ベンダープレフィックス付きで対応: -khtml- (1)

基本構文

CSS 
.center { text-align: center; }
.justify { text-align: justify; }
.logical { text-align: start; }

ライブデモ

Center(center aligned)

CSS Center(center aligned) demo.

プレビュー全画面表示

Justify(justify)

CSS Justify(justify) demo.

プレビュー全画面表示

Right(right aligned)

CSS Right(right aligned) demo.

プレビュー全画面表示

実務での使いどころ

  • コンテンツの配置制御

    見出しを中央揃え、本文を左揃え、引用文を右揃えなど、コンテンツの種類に応じた適切なテキスト配置を設定します。

注意点

  • text-align: justify は短い行で不自然な空白が生じることがあるため、十分な幅のあるコンテナで使用してください。

アクセシビリティ

  • justify は単語間の不均等な間隔により、ディスレクシアのあるユーザーにとって読みづらくなる場合があります。

参考リンク