text-align

ブロックの中にある文字やインライン要素の横方向の揃え方を決めるプロパティ。文章の位置と行末の揃い方を切り替えて比べられます。

遊んでみよう

LTR / RTLで論理値と物理値を比較

LTR左から右へ読む文章です。同じ幅の中で、文字を揃える位置を比べます。

RTL右から左へ読む文章です。同じ幅の中で、文字を揃える位置を比べます。

start

CSS

.element text-align: start;

値のパターン

文字の横揃え text-align

text-alignの構成要素

01text-align

ブロック内の横揃え

ブロックコンテナーや表のセルに指定し、その中のインラインレベルの内容を横方向に揃えます。

02start | end

書字方向に沿う値

startは文章を書き始める側、endは書き終える側です。directionが変わると左右も入れ替わります。

03left | center | right | justify

位置を直接選ぶ値

left・center・rightは位置を指定し、justifyは最終行を除く各行の間隔を広げて両端を揃えます。

早見表

初期値はstartで、子要素へ継承されます。まずは書字方向に沿う値と、左右を固定する値の違いを押さえます。

01start書字方向の先頭へ初期値

02end書字方向の末尾へ論理的な位置

03left左端へ揃える物理的な位置

04center中央へ揃える見出しなど

05right右端へ揃える数値など

06justify左右の端へ揃える最終行を除く

よくある使い方

見出しを中央に置く

短い見出しや案内文を中央揃えにすると、まとまりの中心をはっきり見せられます。

h1 { text-align: center; }

日付や数値を右端に揃える

同じ幅のセルや欄に入る数値を右揃えにすると、桁や末尾を見比べやすくなります。

.amount { text-align: right; }

書字方向に合わせて本文を揃える

startを使うと、左から右へ書く文章でも右から左へ書く文章でも自然な先頭側に揃います。

article { text-align: start; }

ポイント

動くのは箱ではなく、箱の中の文字。

text-alignはブロック要素そのものを中央へ移動するプロパティではありません。箱を配置する場合はmarginやFlexboxなどを使います。text-alignはブロックコンテナーへ適用され、子要素へ継承されます。justifyは単語間に不均一な空白が生まれて読みにくくなる場合があるため、長い本文では実際の読みやすさを確認します。