実行できるHTMLドキュメント: 文字の中央揃え

Q: HTML で文字を中央揃えにするには？

テキストを含む要素に text-align: center を指定します。たとえば や、h1 { text-align: center; } のような CSS のルールです。その要素の中にあるすべての行とインラインの内容が中央揃えになります。

Q: span に text-align: center が効かないのはなぜですか？

span はインライン要素なので幅がテキストの分しかなく、中央に寄せる余地がありません。親のブロック (周りの や ) に text-align: center を指定するか、span を display: block にします。

Q: 文字を上下中央に配置するには？

コンテナを flex ボックスにします: display: flex; align-items: center; (左右も中央にするなら justify-content: center を追加)。高さの決まった箱に 1 行だけなら、高さと同じ line-height を指定する方法も使えます。

Q: タグは今でも使えますか？

使えません。 と align="center" 属性は廃止されています。ブラウザは古いページのために今も表示しますが、新しいコードでは CSS の text-align: center を使いましょう。

Q: HTML で文字を字下げするには？

CSS を使います。text-indent: 2em は段落の最初の行を字下げし、padding-inline-start: 2em や margin-inline-start: 2em はブロック全体を字下げします。テキストに空白や を入れる方法では確実に字下げできません。

HTML で文字を中央揃えにする方法

テキストを含む要素に CSS の text-align: center プロパティを指定します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align は要素の中のすべての行を中央揃えにし、リンク、画像、ボタンなどのインラインの内容も含まれます。継承されるプロパティなので、コンテナに指定すると中にあるすべての要素のテキストが中央揃えになります。

span ではなくブロックに指定する

text-align が効くのは <p>、<div>、見出し、表のセルなどのブロックコンテナです。<span> や <a> では何も起きません。インライン要素の幅はテキストの分しかなく、中央に寄せる余地がないからです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

直し方は常に同じで、text-align: center を親のブロックに移します。

ブロックは中央、行は左揃え

複数行の段落を完全に中央揃えにすると、行の始まる位置がそれぞれ違うので読みにくくなります。よく使われるのは、ブロックをページの中央に置き、テキストは始まり側に揃えたままにする方法です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto は幅のあるブロックを中央に置き、text-align はその中の行を中央揃えにします。flexbox、grid、margin で箱を中央に置く方法は div を中央寄せする方法のページで解説しています。

文字を上下中央に配置する

text-align が働くのは横方向だけです。箱の中で文字を上下中央に配置するには、箱を flex コンテナにします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center は上下の中央、justify-content: center は左右の中央に配置し、行が複数あるときは text-align: center が行同士を中央揃えにします。line-height を使う方法は、高さのわかっている箱に 1 行だけのテキストを置く場合にしか使えません。

text-align の値一覧

値	結果
`start` (初期値)	行が始まり側の端から始まる: 英語では左、アラビア語やヘブライ語では右
`end`	行が終わり側の端で終わる
`center`	行が中央揃えになる
`justify`	行が両端に届くように伸びる (最後の行を除く)
`left`, `right`	言語に関係なく常に左、常に右

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

left と right より start と end を使いましょう。最後の箱のように、右から左に書く言語では自動的に反転します。

古い center タグ

古いページでは、<center> や align 属性で文字を中央揃えにしています。

<center>Old way</center>
<p align="center">Also old</p>

どちらも廃止されています。古いサイトが崩れないようにブラウザは今も表示しますが、現在の HTML では無効で、マークアップにレイアウトが混ざります。CSS の text-align: center を使いましょう。

文字を字下げする

HTML に字下げのタグはなく、入力した空白はまとめられます (HTML の空白を参照)。字下げは CSS で行います。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

字下げ	CSS
最初の行だけ	`text-indent: 2em`
ブロック全体	`padding-inline-start: 2em` または `margin-inline-start: 2em`
ぶら下げ (最初の行だけ外に出す)	`padding-inline-start: 2em; text-indent: -2em`

em を使うと字下げがフォントサイズに連動し、文字の大きさに合わせて変わります。

よくある間違い

インライン要素に text-align を指定する。 親のブロックに指定しましょう。
text-align で箱が中央に来ると思う。 中央揃えになるのはテキストとインラインの内容で、幅のあるブロックではありません。箱には margin-inline: auto か flexbox を使いましょう。
<center> や align="center" を使う。 廃止されています。CSS を使いましょう。
長い段落を中央揃えにする。 中央揃えは見出しや短い行にとどめ、本文は始まり側に揃えましょう。
  や空白で字下げする。 text-indent か padding を使いましょう。

よくある質問

HTML で文字を中央揃えにするには？

テキストを含む要素に text-align: center を指定します。たとえば <p style="text-align: center"> や、h1 { text-align: center; } のような CSS のルールです。その要素の中にあるすべての行とインラインの内容が中央揃えになります。

span に text-align: center が効かないのはなぜですか？

span はインライン要素なので幅がテキストの分しかなく、中央に寄せる余地がありません。親のブロック (周りの <p> や <div>) に text-align: center を指定するか、span を display: block にします。

文字を上下中央に配置するには？

コンテナを flex ボックスにします: display: flex; align-items: center; (左右も中央にするなら justify-content: center を追加)。高さの決まった箱に 1 行だけなら、高さと同じ line-height を指定する方法も使えます。

<center> タグは今でも使えますか？

使えません。<center> と align="center" 属性は廃止されています。ブラウザは古いページのために今も表示しますが、新しいコードでは CSS の text-align: center を使いましょう。

HTML で文字を字下げするには？

CSS を使います。text-indent: 2em は段落の最初の行を字下げし、padding-inline-start: 2em や margin-inline-start: 2em はブロック全体を字下げします。テキストに空白や   を入れる方法では確実に字下げできません。