CSS text-alignとline-heightの使い方｜効かない原因も

text-alignは「行の中身を左右どちらに寄せるか」、line-heightは「1行の高さ（行間）」、letter-spacingは「文字と文字の間隔」を決めるCSSプロパティです。 3つとも文章の読みやすさを左右する基本の指定で、親に書くと子へ引き継がれる（継承される）という共通点があります。

この記事では、3つのプロパティの値を早見表にまとめたうえで、「text-align: center が効かない」を原因別に再現し、margin: auto や justify-content との使い分けを表にしました。line-height は単位なし・em・px で子への伝わり方がどう変わるかを数値で比べ、letter-spacing を広げたときに中央がずれる現象は画像のピクセルを数えて確かめています。数値はすべて Chromium 141（Playwright 1.56 のヘッドレス実行）で測ったものです。

text-align・line-height・letter-spacingの早見表

「左右の寄せは text-align、行間は line-height、文字間は letter-spacing」と役割で覚えると、どれを触ればよいかがすぐ決まります。

検証に使った環境

文字幅はフォントによって変わるため、手元で試すと数値は少し違って出ます。大小関係や「効く・効かない」は同じになります。

text-alignの使い方

基本の書き方と値

.title   { text-align: center; }  /* 中央 */
.price   { text-align: right; }   /* 右 */
.article { text-align: start; }   /* 書き出し側（日本語・英語では左） */

text-align-last を足すと最終行だけ別の寄せ方にできます。幅300pxの段落で、行ごとの「開始位置＋幅」を測った結果です。

text-align 指定なし                   : 0+287 / 0+289 / 0+269 / 0+57
text-align: justify                    : 0+300 / 0+300 / 0+300 / 0+57   ← 最終行以外が300pxにそろう
justify ＋ text-align-last: center     : 0+300 / 0+300 / 0+300 / 121+57 ← 最終行だけ中央

text-alignが動かすもの・動かさないもの

text-align は「ブロックの中にある inline の中身」を寄せる指定です。ブロックの箱そのものは動かしません。 ここを押さえると、効かない理由のほとんどが説明できます。

text-align: centerが効かない原因と対処

原因と対処の一覧

原因1：inline要素に指定している

再現コード:

<style>.parent { width: 600px; }</style>
<div class="parent">
  <span style="text-align: center">inline</span>
</div>

修正コード:

<div class="parent" style="text-align: center">
  <span>inline</span>
</div>

実測:

span に text-align: center      => span の左端 x=0      幅 43.47（動かない）
親の div に text-align: center  => span の左端 x=278.27 幅 43.47（中央）

span の箱は文字ぶんの幅（43.47px）しかないので、その中で中央に寄せても見た目は変わりません。text-align は「寄せたいものの親」に書く、と覚えると迷いません。 計算は (600 − 43.47) ÷ 2 ＝ 278.27 で、実測と一致します。

原因2：ブロックの箱そのものを寄せたい

再現コード:

<div class="parent">
  <div class="box" style="width: 200px; text-align: center">box</div>
</div>

修正コード:

<div class="parent">
  <div class="box" style="width: 200px; margin-inline: auto; text-align: center">box</div>
</div>

実測:

箱に text-align: center だけ             => 箱 x=0   / 中の文字 x=85.53（箱の中で中央）
箱に margin-inline: auto を追加          => 箱 x=200 / 中の文字 x=285.53
親に text-align: center（箱は block）    => 箱 x=0   / 中の文字 x=85.53（継承で文字だけ中央）
親に text-align: center（箱は inline-block）=> 箱 x=200 / 中の文字 x=285.53

3行目のとおり、親に書いた text-align は子に継承されるので、箱は動かず「箱の中の文字」が中央になります。 箱を動かす方法は2つあります。

• 箱に margin-inline: auto（margin: 0 auto と同じ働き）。幅が必要なので、中身ぶんにしたいときは width: fit-content を組み合わせます（実測で幅16.36pxの箱が x=291.81）。
• 箱を display: inline-block にして、親の text-align で寄せる。

画像も同じです。

親 text-align:center ＋ img（inline）          => x=250（中央）
親 text-align:center ＋ img { display:block }  => x=0  （動かない）
img { display:block; margin-inline:auto }       => x=250（中央）

画像の下のすき間を消すために display: block を付けると、text-align では寄らなくなります。 そのときは画像に margin-inline: auto を足します。

原因3：flexの子になっている

再現コード:

<div class="parent" style="display: flex; text-align: center">
  <div>item</div><div>item2</div>
</div>

修正コード:

<div class="parent" style="display: flex; justify-content: center">
  <div>item</div><div>item2</div>
</div>

実測:

display:flex ＋ text-align:center      => item x=0 / item2 x=36.16（左に並ぶ）
display:flex ＋ justify-content:center => item x=258.75 / item2 x=294.91（まとめて中央）
display:flex ＋ 子に flex:1             => 子の幅 600、中の文字 x=281.92（文字は中央）

flexの子は中身ぶんの幅のブロックとして並ぶので、text-align では位置が変わりません。3行目のように子が広がっている（flex: 1）ときは、継承された text-align が子の中の文字に効きます。「子の位置は justify-content、子の中の文字は text-align」と分けて考えます。

使い分けの判断表

要素ごとの初期値の違い

Chromium 141 で getComputedStyle() を読むと、要素によって text-align の初期スタイルが違いました。

th     => center
td     => start
button => center
input  => start

表の見出しセル（th）とボタンは最初から中央、データセル（td）と入力欄は書き出し側です。 数値の列を右にそろえたいときは td に text-align: right を書きます。

自分のブラウザで確かめるためのHTML

ここまでの「効く・効かない」と、このあとの line-height の継承は、次のHTMLを保存して開くと手元でも確かめられます。結果は開発者ツールのコンソールに出ます。

<!doctype html>
<meta charset="utf-8">
<style>
  * { margin: 0; }
  body { font: 16px/1.5 sans-serif; }
  .parent { width: 600px; background: #eee; margin-bottom: 8px; }
</style>

<!-- text-align：どこに書くと動くか -->
<div class="parent"><span id="a" style="text-align: center">inline</span></div>
<div class="parent" style="text-align: center"><span id="b">inline</span></div>
<div class="parent"><div id="c" style="width: 200px; text-align: center">box</div></div>
<div class="parent"><div id="d" style="width: 200px; margin-inline: auto">box</div></div>
<div class="parent" style="display: flex; text-align: center"><div id="e">item</div><div>item2</div></div>
<div class="parent" style="display: flex; justify-content: center"><div id="f">item</div><div>item2</div></div>

<!-- line-height：単位なしと em の継承の違い -->
<div style="font-size: 16px; line-height: 1.5"><h2 id="g" style="font-size: 32px">Heading</h2></div>
<div style="font-size: 16px; line-height: 1.5em"><h2 id="h" style="font-size: 32px">Heading</h2></div>

<script>
  for (const id of ['a', 'b', 'c', 'd', 'e', 'f']) {
    const r = document.getElementById(id).getBoundingClientRect();
    console.log(id, 'x =', r.x, 'width =', r.width);
  }
  for (const id of ['g', 'h']) {
    console.log(id, 'line-height =', getComputedStyle(document.getElementById(id)).lineHeight);
  }
</script>

Chromium 141 での結果は次のとおりです（文字幅はフォントによって変わります。この記事の計測では DejaVu Sans を使いました）。

a x = 0      width = 43.47   ← span 自身に書いても動かない
b x = 278.27 width = 43.47   ← 親に書くと中央
c x = 0      width = 200     ← 箱は動かない
d x = 200    width = 200     ← margin-inline: auto で箱が中央
e x = 0      width = 36.16   ← flex の子は動かない
f x = 258.75 width = 36.16   ← justify-content で2つまとめて中央
g line-height = 48px         ← 単位なし：32px × 1.5
h line-height = 24px         ← em：親で確定した 24px のまま

line-heightの使い方

基本の書き方

body { line-height: 1.7; }          /* 本文：文字サイズの1.7倍 */
h1, h2, h3 { line-height: 1.3; }    /* 見出し：詰め気味に */

line-height は「1行ぶんの箱の高さ」です。文字サイズ16px・line-height 1.5 なら1行は24pxで、文字の上下に4pxずつの余白が付きます。行と行の間にだけ余白が入るのではなく、各行の上下に半分ずつ入る点が、1行目の上や最終行の下に少し空きが見える理由です。

値の書き方

単位なしをすすめる理由（継承の実測）

親を font-size: 16px にして line-height を5通りに変え、その中に font-size: 32px の見出し（3行に折り返す）と font-size: 12px の小さな文字を置きました。

<div style="font-size: 16px; line-height: 1.5; width: 300px">
  <h2 style="font-size: 32px; font-weight: normal">Heading text wraps onto two lines here</h2>
  <p style="font-size: 12px">small</p>
</div>

実測（計算済みの line-height と要素の高さ）:

単位なしの 1.5 だけが、子の文字サイズに合わせて 48px・18px と計算し直されています。 1.5em や 150% は親の時点で 24px に確定し、その 24px が子に渡るため、32px の文字が 24px の行に押し込まれて行どうしが重なります（3行で72px＝1行24px）。

本文と見出しの目安値

これは一般に使われている目安で、今回の検証で読みやすさを測定したものではありません。フォントと文字サイズ、1行の文字数に合わせて調整してください。

normalはフォントによって変わる

line-height: normal（初期値）の高さは、フォントが持つ情報から決まります。文字サイズ20pxで測ると次のとおりでした。

DejaVu Sans        => 27px（約1.35倍）
DejaVu Serif       => 27px
Noto Serif CJK JP  => 29px（約1.45倍）
monospace          => 27px

同じ normal でもフォントが変わると行の高さが変わるので、body に数値を書いておくと環境による差が出にくくなります。

行の高さについての補足

実測で確かめた、知っておくと便利な挙動です。

最後の行について補足すると、幅100pxに「gy gy gy gy」を入れて2行に折り返した状態で高さが48px、つまり1行24px（30px×0.8）でした。文字そのものは30pxあるので、下に伸びる「g」「y」と次の行が重なります。1未満の値は、大きな数字を1行だけ見せるような場面に限ると扱いやすくなります。

1行だけを縦の中央に置く方法として height と line-height を同じ値にする書き方がありますが、2行になると崩れます。複数行になりうる場合は display: flex; align-items: center; か、padding で上下の余白を付ける方法が安定します。

letter-spacingの使い方

基本の書き方

.heading { letter-spacing: 0.1em; }    /* 文字サイズの10%ぶん広げる */
.tight   { letter-spacing: -0.02em; }  /* 少し詰める */
.reset   { letter-spacing: normal; }   /* 初期値に戻す */

単位は em が扱いやすく、文字サイズを変えても同じ比率の間隔が保たれます。 px で書くと、文字サイズを変えたときに見た目の比率が変わります。なお Chromium 141 では letter-spacing: 5% のような % 指定は CSS.supports() が false でした。

文字サイズ20pxの「TITLE」（5文字）で幅を測った結果です。

letter-spacing なし      => 54.13px
letter-spacing: 1em      => 154.13px（＋100px ＝ 20px × 5文字ぶん）
letter-spacing: -0.05em  => 49.13px（−5px ＝ −1px × 5文字ぶん）
word-spacing: 1em（"A B"）=> 53.77px（指定なしは 33.77px。空白1つぶんに＋20px）

5文字で間は4か所ですが、増えた幅は5文字ぶんです。 余白は「文字と文字の間」ではなく「各文字の後ろ」に付くため、最後の文字の右にも1つぶん残ります。これが次の「中央ずれ」の原因です。

目安値

こちらも一般的な目安です。日本語フォントで約物（句読点やかっこ）の空きを詰めたいときは、font-feature-settings: "palt"（プロポーショナル字詰め）や text-spacing-trim という別の方法もあります（どちらも Chromium 141 で CSS.supports() が true）。

letter-spacingで中央がずれる：再現

幅400pxの段落に text-align: center を指定し、要素のスクリーンショットから「いちばん左の黒い画素」と「いちばん右の黒い画素」を探して、左右の空きを数えました。

再現コード:

<p style="width: 400px; font-size: 20px; text-align: center; letter-spacing: 1em">TITLE</p>

実測（左の空き／右の空き、単位px）:

letter-spacing なし     => 左 173 / 右 174  （差 1：中央）
letter-spacing: 0.5em   => 左 148 / 右 159  （差 11）
letter-spacing: 1em     => 左 123 / 右 144  （差 21：左へ約10pxずれて見える）

letter-spacing が 1em（20px）のとき、右の空きが約20px多くなりました。 最後の「E」の後ろに付いた 20px ぶんも「文字列の幅」として中央に置かれるので、見える文字は半分の10pxだけ左に寄ります。間隔を広げるほど、ずれは大きくなります。

中央ずれの対処3通り

/* 方法1：先頭に同じ幅の字下げを入れる（1行のとき） */
.title { text-align: center; letter-spacing: 1em; text-indent: 1em; }

/* 方法2：左に同じ幅の padding を入れる（複数行でも可） */
.title { text-align: center; letter-spacing: 1em; padding-left: 1em; box-sizing: border-box; }

/* 方法3：内側の span の右をマイナス margin で打ち消す */
.title { text-align: center; }
.title > span { letter-spacing: 1em; margin-right: -1em; }

実測:

方法1 text-indent: 1em         => 左 133 / 右 134
方法2 padding-left: 1em        => 左 133 / 右 134
方法3 span に margin-right:-1em => 左 133 / 右 134

3つとも左右の差が1px以内になりました。

右寄せでも同じことが起きます。

text-align: right ＋ letter-spacing: 1em         => 右の空き 21px（右端にそろわない）
span に letter-spacing: 1em; margin-right: -1em  => 右の空き 1px

右端をそろえたいときは方法3が使えます。 em の値は letter-spacing と同じにするので、CSS変数にまとめておくと変更が1か所で済みます。

.title { --ls: 0.2em; text-align: center; letter-spacing: var(--ls); text-indent: var(--ls); }

折り返しを整える新しい指定

text-wrap: balanceで見出しの行をそろえる

text-wrap: balance は、各行の長さがなるべく近くなるように折り返し位置を調整する指定です。幅420px・文字24pxの見出しで、行ごとの幅を測りました。

<h2 style="width: 420px; font-size: 24px; line-height: 1.3; text-wrap: balance">
  Understanding CSS text alignment and line height for readable pages
</h2>

実測（各行の幅 px）:

指定なし             => 324 / 397 / 209
text-wrap: balance   => 260 / 317 / 352
text-wrap: pretty    => 324 / 397 / 209
text-wrap: nowrap    => 946（折り返さない）

指定なしでは最終行が209pxと短くなりましたが、balance では3行が 260〜352px に収まり、長さの差が小さくなっています。中央寄せの見出しやカードのタイトルに1行足すだけで、最後に1語だけ残る見た目を避けやすくなります。

MDN の text-wrap のページによると、balance は計算に手間がかかるため、対象の行数に上限があります（Chromium は6行まで、Firefox は10行まで）。そのため長い本文ではなく、見出しや短いリード文に向いています。

text-wrap: prettyで最終行の1語残りを減らす

pretty は本文向けで、最終行に短い語が1つだけ残るのを減らすように折り返しを調整します。段落の幅を300〜510pxまで10px刻みで変えて比べたところ、次の幅で違いが出ました。

幅310px  指定なし => 306 / 308 / 270 / 44    pretty => 306 / 262 / 281 / 79
幅450px  指定なし => 449 / 440 / 44          pretty => 415 / 439 / 79

最終行が44px（1語）だったものが、pretty では前の行から1語が送られて79pxになっています。それ以外の幅では結果は同じでした。pretty は「必要なときだけ手前の行を少し変える」指定で、見出しの例のように最終行がすでに十分長い場合は変化しません。

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

そのほかの指定（対応状況の確認）

Chromium 141 で CSS.supports() を実行した結果です。ほかのブラウザの対応状況は今回確認していません。

text-box は、line-height が作る上下の余白を切り詰める指定です。文字40px・line-height 1.5 の見出しで高さを測ると、指定なしが60px、text-box: trim-both cap alphabetic を付けると30pxになりました。見出しの上端を隣の画像や箱とぴったりそろえたいときに使えます。

コピペで使える基本セット

/* 記事本文 */
body {
  line-height: 1.7;          /* 単位なし：子の文字サイズで計算し直される */
  letter-spacing: 0.03em;
}

/* 見出し */
h1, h2, h3 {
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-wrap: balance;        /* 行の長さをそろえる */
}

/* 段落 */
p { text-wrap: pretty; }

/* 中央寄せの見出し（字間を広げてもずれない） */
.section-title {
  --ls: 0.2em;
  text-align: center;
  letter-spacing: var(--ls);
  text-indent: var(--ls);
}

/* 幅のある箱を中央に */
.box { width: min(100%, 600px); margin-inline: auto; }

/* 中身ぶんの幅のボタンを中央に */
.button { display: block; width: fit-content; margin-inline: auto; }

/* 横並びの項目を中央に */
.nav { display: flex; justify-content: center; gap: 16px; }

/* 表：数値の列は右そろえ */
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 1行のボタン：高さは padding で作る */
.btn { line-height: 1.2; padding: 0.6em 1.2em; }

効かないときの確認チェックリスト

よくある質問

Q. text-align: center と margin: 0 auto はどう違いますか？ A. text-align は「箱の中の文字や inline の要素」を寄せ、margin: 0 auto（margin-inline: auto）は「幅のあるブロックの箱そのもの」を寄せます。実測では、幅200pxの箱に text-align だけを書くと箱は x=0 のまま中の文字だけが中央になり、margin-inline: auto を足すと箱が x=200 に移動しました。

Q. line-heightに単位を付けないのはなぜですか？ A. 単位なしだと「倍率」が子に伝わり、子の文字サイズで計算し直されるからです。親が16pxで 1.5 のとき、32pxの見出しは48pxになりました。1.5em・150%・24px はどれも24pxという長さが伝わり、32pxの見出しでも24pxのままで行が重なりました。

Q. 行間を「◯px空けたい」ときはどう計算しますか？ A. line-height ＝（文字サイズ＋空けたい行間）÷ 文字サイズ で求めます。文字16pxで行間を12px空けたいなら (16＋12)÷16 ＝ 1.75 です。デザインデータに「行送り28px」と書かれている場合も 28÷16 ＝ 1.75 と割り算して、単位なしで書くと継承で困りません。

Q. 文字を縦方向の中央に置くにはどうしますか？ A. text-align は左右だけを扱います。縦は、親を display: flex; align-items: center; にする方法が行数に左右されません。1行に決まっているなら、height と line-height を同じ値にする方法もあります（実測で、高さ48pxの箱の中で高さ19pxの文字が y=14 から始まり、上下の空きが同じになりました）。

まとめ

• text-align は「親に書いて、中の inline を寄せる」指定。 寄せたい span 自身に書いても動かない（実測で x=0 のまま）。
• 箱そのものを寄せるのは margin-inline: auto、flexの子は justify-content: center。 寄せたいものの種類で指定を選ぶ。
• line-height は単位なしで書く。 倍率が子に伝わり、32pxの見出しで48pxと計算し直される。em・%・px は24pxのまま伝わる。
• 目安は本文 1.6〜1.8、見出し 1.2〜1.4。 normal はフォントで高さが変わる（20pxで27px／29px）。
• letter-spacing の余白は各文字の後ろに付く。 1em で右の空きが約20px多くなり、text-indent・padding-left・マイナス margin のどれかで左右差が1px以内に戻る。
• 見出しには text-wrap: balance、本文には text-wrap: pretty。 balance は行の幅が 324/397/209 から 260/317/352 に変わった。

株式会社RJCでは、CSSのtext-alignやline-heightの使い方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。