【HTML/CSS】中央寄せの方法を徹底解説!

「HTMLで中央寄せをする方法を知りたい!」

「なんだかうまく中央寄せされなくて困っている!」

このような悩みを持つ方はぜひ読み進めてください。

HTMLで「中央寄せ」や「左寄せ」「右寄せ」などを行う際はきちんと正しい「タグ」を使用しなければいけません。
間違ったタグを使ってしまうと正しく表示されない、といったトラブルの原因になってしまうので、ぜひこの機会に覚えておきましょう。

  • HTMLで中央寄せ、左寄せ、右寄せする方法
  • CSSを使った中央寄せの方法
  • 中央寄せの際の注意点

上記ついて解説していますので、ぜひ参考にしてくださいね。

HTMLで中央寄せなどをする方法

では早速、HTMLで文字などを中央寄せする方法について解説していきますね。

使用するのが「align属性」です。
難しいことはないと思いますが、分かりやすく実際のコードを記述しながら解説をしていきますね。

では早速、「中央寄せ」をはじめ、「左寄せ」や「右寄せ」をする方法について解説をしていきます!

中央寄せの方法

具体的な記述方法は以下の通りです。

これで文字を中央寄せできる!

「align属性」を使い、中央寄せにするための「center」で要素を中央寄せすることができます。

左寄せの方法

具体的な記述方法は以下の通りです。

これで文字を左寄せできる!

同じく「align属性」を使って、左寄せにする「left」で左寄せすることができます。

右寄せの方法

具体的な記述方法は以下の通りです。

これで文字を右寄せできる!

こちらも「align属性」を使って、右寄せにする「right」で右寄せすることができます。

CSSを使った中央寄せの方法7パターン

CSSのコード

通常中央寄せなどは、HTMLではなくCSSを使って変更させます。

文字であれは<p>タグを指定して変更をかける、ということになりますね

もっと詳しく解説をするため、CSSを使った中央寄せの方法をパターン別に紹介したいと思います。

文章の中央寄せ

まずは文字などを、横方向に中央寄せさせる方法についての解説です。

文章を左右中央に揃えたいときは、その文章が含まれる要素もしくはその親要素に対して「text-align:center」を指定します。具体的には以下の通りです。

文字の中央寄せ

変更させたい<p>タグに対して「text-align:center」で中央寄せすることも可能ですが、そのページ全体の文字を中央に寄せたいのであれば、

このような記述もできますね。

画像の中央寄せ

画像も中央寄せすることができます。

文章と同じように扱うことができますが、<img>タグに変更をかけるのではなく、親要素に対して「text-align:center」を使うことになるので注意しましょう!

画像の中央寄せ

HTMLの<p>タグに文字が入っていると、一緒に中央寄せになってしまいます。

ブロック要素の中央寄せ

HTMLには、「ブロック要素」と「インライン要素」があります。

  • ブロック要素:見出しや段落など、文書を構成する基本となる要素。一つのブロック(かたまり)
  • インライン要素:ブロック要素の内容として用いられる要素で、文章の一部として扱われます。

上記のように2つの要素があり、正しく理解できていないとせっかく中央寄せにする記述をしても、

あれ、中央寄せになっていない?

となってしまいますので、この機会にぜひ覚えておきましょう!

まず大切なことですが、ブロックの要素に「text-align」を使っても中央寄せになりません。
例えば、<p>タグの親要素となっている<div>タグに対して「text-align:center」を使う場合などですね。

その理由は、<p>タグなどの「display: blockの要素に対しては、「text-alignは適用されない仕様となっているからです。これはCSSのルールですのでしっかりと覚えておきましょう。

ではどのように中央寄せにするかというと、「marginプロパティ」を使用します。

これは親要素です

「margin: auto」にすることで、左右水平に中央寄せをすることができます。
今回は背景色をつけて分かりやすくしています。

「margin-top: auto;」と「margin-bottom: auto;」

「margin-top」と「margin-bottom」で、要素の上側と下側の外部余白を指定することができます。

書き方としては以下の通りです。

しかしここで「auto」を使うと上下の幅はデフォルトで0となり、要素同士がくっついてしまいます。
ですので「auto」を使用する場合は、「margin: 〇〇 auto;」で上下の幅を決めて、autoで中央寄せにするイメージで記述しましょう!

inline-blockを活用して中央寄せ

「display: inline-block」を指定した要素は「ブロック」と「インライン」の中間のような扱いが可能になります。これによってブロックのように幅指定もでき、インラインのようにtext-align指定もできるようになります

具体的には以下のように記述します。

上下への中央寄せ

縦方向へ中央寄せする方法も紹介していきます。
よく間違えがちなのですが、

横の中央寄せと同じように「margin-top:auto」「margin-bottom: auto」を使えば大丈夫

と思いがちですが、この方法は縦の中央寄せでは使えません。

実際に見てみましょう。

heightは親要素に対して指定しており、行の高さは「line-height」で指定をしています。この数値を合わせないとうまく中央寄せできないので気をつけましょう。

中央寄せする際の注意点とは?

注意点

中央寄せする際は、”正しく” タグを使用する必要があります。
これはHTMLやCSSの仕様によって対応できるものとできないものがあるためです。

HTML5へとバージョンが変化したこともあり、廃止されたタグなどもありますのできちんと理解しておきましょう!

  • インライン要素の中央寄せは「text-align: center 」
  • ブロック要素は「margin: auto」で中央寄せ
  • HTML5では「center」タグ、「align」属性は廃止された

また、CSSで中央寄せができていない原因としてもう一度確認をしてみましょう。

text-align:centerが効かない

  • ブロック要素になっていないか
  •  親要素に対して指定をしているか

margin: 0 autoが効かない

  • インライン要素になっていないか
  • 親要素の幅が小さすぎないか

まとめ

いかがでしたか?

今回の記事では、

HTML/CSSでの中央寄せの方法

を解説しました。
適切なタグを使い、「思うように表示できない!」ということが起きないように気をつけましょう。

この記事が参考になったならとても嬉しいです。