CSS の text-align プロパティは、インライン又は表セルボックスの水平方向の配置を指定します。つまり、水平方向に 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
インラインコンテンツは行ボックスの左辺に寄せられます。
インラインコンテンツは行ボックスの右辺に寄せられます。
center
インラインコンテンツは行ボックス内で中央寄せされます。
justify
インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように語間が空けられます。
justify-all
justify と同じですが、最終行も強制的に両端揃えされます。
match-parent
inherit に似ていますが、 startend 値が親要素の direction に従って計算され、適切な leftright 値に置き換えられます。
<string>
表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。

形式文法

start | end | left | right | center | justify | 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 marginauto に設定することです。

.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 の定義
草案 startendmatch-parent キーワードを追加。名前のなかった初期値を(まさにそれである)start に変更。
CSS Level 2 (Revision 1)
text-align の定義
勧告 変更なし
CSS Level 1
text-align の定義
勧告 初回定義

初期値startstart をサポートしないブラウザでは、文章の方向ltr なら leftrtl なら right として動作する無名の値
適用対象ブロックコンテナー
継承あり
メディア視覚
計算値指定値。ただし match-parent 値を除く。この値は親要素の方向にもとづいて計算され、計算値が左右どちらにもなります
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
Prefixed center, left, and right values for block alignment
非推奨非標準
Chrome 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge ? Firefox 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera ? Safari 完全対応 1.3
接頭辞付き
完全対応 1.3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 1
接頭辞付き
接頭辞付き -khtml- のベンダー接頭辞が必要
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Flow-relative values start and end
実験的
Chrome 完全対応 1Edge 未対応 なしFirefox 完全対応 1IE 未対応 なしOpera ? Safari 完全対応 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
match-parent
実験的
Chrome 完全対応 16Edge ? Firefox 完全対応 40IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 40Opera Android ? Safari iOS ? Samsung Internet Android ?
justify-all
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Character-based alignment in a table column (<string> value)
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE ? Opera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,