HTMLで文字を中央にする方法｜よくある失敗と正しい書き方

ホームページを作っていると、

このようなことはもありますよね？

そこでこの記事では、
初心者の方でもすぐできる方法と、よくある失敗の直し方をわかりやすく解説します。

文字を中央寄せにしたい場合は、ぜひ確認してみてくださいね！

HTMLで文字が中央にならないよくある原因

まずは、HTMLで文字が中央にならないよくある原因からご紹介します。

うまくいかない理由を見ておきましょう。

古い方法を使っている

昔はこのような書き方がありました。

<center>中央の文字</center>

これはすでに使わない方法なので、うまく動かないことがあります。

正しい指定をしていない

文字を中央にするには、text-align を使います。

これが入っていないと中央になりません。

HTMLで文字を中央にする一番簡単な方法

それでは、HTMLで文字を中央にする一番簡単な方法をご紹介します。

最もシンプルな書き方はこちらです。

<p style="text-align:center;">中央の文字</p>

これだけで文字が中央にそろいます。

なぜ中央になるのか

text-align:center; は、「文字を中央に並べる」という意味です。

初心者の方は、この形を覚えるだけでOKです。

見出し（h1・h2）を中央にする方法

次に、見出し（h1・h2）を中央にする方法もご紹介します。

見出しも同じ考え方でできます。

<h2 style="text-align:center;">見出しを中央に</h2>

これで見出しもきれいに中央になります。

画像と文字をまとめて中央にする方法

画像と文字をまとめて中央にする方法もご紹介します。

複数の要素をまとめて中央にしたい場合は、親のタグに指定します。

<div style="text-align:center;">
  <img src="sample.jpg">
  <p>説明文</p>
</div>

この中に入れた文字や画像は、すべて中央にそろいます。

よくある失敗パターンと直し方

よくある失敗パターンと直し方をご紹介します。

centerタグを使ってしまう

<center>中央の文字</center>

👉 今は使わないので、text-alignに変更しましょう。

指定場所を間違えている

<div>
  <p>中央にならない文字</p>
</div>

👉 指定がないので中央になりません。

正しくはこうします。

<div style="text-align:center;">
  <p>中央になる文字</p>
</div>

スマホでもきれいに中央になる基本形

スマホでもきれいに中央になる基本形をお伝えします。

初心者の方は、この形を使えば安心です。

<p style="text-align:center;">中央の文字</p>

見出しも同じです。

<h2 style="text-align:center;">中央の見出し</h2>

これでパソコンでもスマホでもきれいに表示されますよ。

まとめ

「HTMLで文字を中央にする方法｜よくある失敗と正しい書き方」はいかがでしたでしょうか？

HTMLで文字を中央にする方法はとても簡単です。

ほとんどの場合、これだけで解決します。

私は、2004年にホームページの作り方を学び始めましたが、昔のHTMLをそのまま使っていることもありました。

そうすると、いつの間にか「うまく表示されない」というトラブルが起きるため、けっこう焦るのですよね、、、

ぜひ、最新のHTMLの書き方を確認してくださいね！