テキスト

text-align

text-align は、行の中の文字を左右どちらに寄せるかを指定します。中央揃えや両端揃えもできます。

構文

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

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  text-align: center;
}

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

start / end：書く向きの始まり側・終わり側に寄せます。横書きの日本語や英語なら start は左です。アラビア語のような右から左の文章では右になります。初期値は start です。
left / right：書く向きに関係なく左・右に寄せます。
center：中央に揃えます。
justify：最後の行以外を両端まで伸ばして揃えます。英語は単語の間、日本語は文字の間で調整されます。最後の行の揃え方は text-align-last で変えられます。
match-parent：親と同じ揃え方にします。inherit と違い、start と end は親の書く向きで左右に置き換えます。

text-align は、要素の中の文字や img、inline-block の要素を寄せます。要素そのものの位置は変わりません。ブロック要素を中央に置きたいときは margin-inline: auto や flexbox を使います。

text-align は子の要素に引き継がれます。カードの見出しだけを中央に揃えたつもりが、中の本文まで中央揃えになっていることがあります。