このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

text-align

text-align は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 vertical-align のように、ただし水平方向に動作します。

試してみましょう

構文

/* キーワード値 */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
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: revert;
text-align: unset;

text-align プロパティは、以下の方法のうちの一つで指定されます。

  • キーワード値 start, end, left, right, center, justify, justify-all, match-parent のいずれかを使用。
  • <string> 値のみを使用、この場合は他の値の既定値が right になります。
  • キーワード値または <string> 値の使用。

値

start

書字方向が左書きであれば left、右書きであれば right と同じです。

end

書字方向が左書きであれば right、右書きであれば left と同じです。

left

インラインコンテンツは行ボックスの左辺に寄せられます。

インラインコンテンツは行ボックスの右辺に寄せられます。

center

インラインコンテンツは行ボックス内で中央寄せされます。

justify

インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。

justify-all

justify と同じですが、最終行も強制的に両端揃えされます。

match-parent

inherit に似ていますが、 start と end 値が親要素の direction に従って計算され、適切な left か right 値に置き換えられます。

<string>

表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。

アクセシビリティの考慮

両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。

公式定義

初期値start。start をサポートしないブラウザでは、書字方向が ltr なら left、rtl なら right として動作する無名の値
適用対象ブロックコンテナー
継承あり
計算値指定値。ただし match-parent 値を除く。この値は親要素の direction の値に基いて計算され、計算値が left または right のどちらかになる
アニメーションの種類離散値

形式文法

start | end | left | right | center | justify | match-parent

Examples

先頭へ配置

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: start;
  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;
}

結果

仕様書

Specification
CSS Logical Properties and Values Level 1
# text-align
CSS Text Module Level 3
# text-align-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報