text-align

CSS の text-align プロパティは、テキストのようなインラインコンテンツが、その親ブロック要素の中でどのように配置されるのかを定義します。 text-align が制御するのはそのインラインコンテンツだけで、ブロック要素の配置は制御しません。

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

/* キーワード値 */
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, end, left, right, center, justify, justify-all, match-parent の使用。
• <string> 値のみを使用、この場合は他の値の既定値が right になります。
• キーワード値または <string> 値の使用。

値

start

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

end

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

left

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

right

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

center

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

justify

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

justify-all

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

match-parent

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

<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 margin を auto に設定することです。

.something {
  margin: auto;
}

.something {
  margin: 0 auto;
}

.something {
  margin-left: auto;
  margin-right: auto;
}

アクセシビリティの考慮事項

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

• MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
• Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• margin:auto, margin-left:auto, vertical-align