text-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

構文

css
/* キーワード値 */
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: revert-layer;
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 のどちらかになる
アニメーションの種類離散値

形式文法

text-align = 
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent  |
  justify-all

例

先頭へ配置

HTML

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

css
.example {
  text-align: start;
  border: solid;
}

結果

中央揃え

HTML

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

css
.example {
  text-align: center;
  border: solid;
}

結果

"justify" を使用した例

HTML

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

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

関連情報