We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

この翻訳は不完全です。英語から この記事を翻訳 してください。

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

構文

/* Keyword values */
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;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

The text-align property is specified as a single keyword chosen from the list of values below.

start
文章の方向が左から右であれば left と、右から左であれば right と同じです。
end
文章の方向が左から右であれば right と、右から左であれば left と同じです。
left
インラインコンテンツは行ボックスの左辺に寄せられます。
right
インラインコンテンツは行ボックスの右辺に寄せられます。
center
インラインコンテンツは行ボックス内で中央寄せされます。
justify
インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように語間が空けられます。
justify-all
justify と同じですが、最終行も強制的に両端揃えされます。
match-parent
inherit に似ていますが、 startend 値が親要素の direction に従って計算され、適切な leftright 値に置き換えられます。

形式文法

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

Left alignment

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

Result

Centered text

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

Result

Justify

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

Result

Notes

The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.:

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

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11213 あり1
Prefixed center, left, and right values for block alignment1 -webkit- ?1 -moz- なし ?

1.3 -webkit-

1 -khtml-

Flow-relative values start and end1 なし1 なし ?3.1
match-parent16 ?40 なし ? なし
justify-all なし なし なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり ? あり
Prefixed center, left, and right values for block alignment ? ? ? ? ? ? ?
Flow-relative values start and end ? ? ?4 ? ? ?
match-parent ? ? ?40 ? ? ?
justify-all なし なし なし なし なし なし なし

関連情報

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

このページの貢献者: momdo, mitsuba-clover, Sebastianz, Sheppy, omasanori, ethertank, sosleepy
最終更新者: momdo,