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

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

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

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

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

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

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

1 HTMLで中央寄せなどをする方法
2 CSSを使った中央寄せの方法7パターン
3 中央寄せする際の注意点とは？
- 3.1 text-align:centerが効かない
- 3.2 margin: 0 autoが効かない
4 まとめ

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

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

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

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

中央寄せの方法

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

<div style="text-align: center">
  これで文字を中央寄せできる！
</div>

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

</div>

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

左寄せの方法

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

<div style="text-align: left">
  これで文字を左寄せできる！
</div>

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

</div>

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

右寄せの方法

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

<div style="text-align: right">
  これで文字を右寄せできる！
</div>

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

</div>

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

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

CSSのコード

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

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

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

文章の中央寄せ

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

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

p {
　text-align: center
}

p {

　text-align: center

}

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

body {
　text-align:center
}

body {

　text-align:center

}

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

画像の中央寄せ

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

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

<p>
  <img src="..." />
</p>

<p>

</p>

p {
  text-align:center;
}

p {

text-align:center;

}

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

ブロック要素の中央寄せ

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

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

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

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

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

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

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

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

<div class="example">これは親要素です</div>

1	<div class="example">これは親要素です</div>

.example {
 margin: 20px auto;
 width: 50px;
 background: #dcdcdc;
}

.example {

margin: 20px auto;

width: 50px;

background: #dcdcdc;

}

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

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

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

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

 <div class="example1">これは親要素です</div>
 <div class="example2">これは親要素です</div>

1 2	<div class="example1">これは親要素です</div> <div class="example2">これは親要素です</div>

.example1 {
    margin-bottom: auto;
    width: 500px;
    display: block;
    background: #dcdcdc;
}

.example2 {
    margin-bottom: auto;
    width: 500px;
    display: block;
    background: #faf0e6;
}

.example1 {

margin-bottom: auto;

width: 500px;

display: block;

background: #dcdcdc;

}

.example2 {

margin-bottom: auto;

width: 500px;

display: block;

background: #faf0e6;

}

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

.example1 {
    margin: 50px auto;
    width: 500px;
    display: block;
    background: #dcdcdc;
}

.example2 {
    margin: 50px auto;
    width: 500px;
    display: block;
    background: #faf0e6;
}

.example1 {

margin: 50px auto;

width: 500px;

display: block;

background: #dcdcdc;

}

.example2 {

margin: 50px auto;

width: 500px;

display: block;

background: #faf0e6;

}

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

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

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

<div class="exam">
  <div class="example">
  inline-blockに変更
  </div>
</div>

inline-blockに変更

</div>

.exam {
  text-align: center;
}
.example {
  display: inline-block;
}

.exam {

text-align: center;

}

.example {

display: inline-block;

}

上下への中央寄せ

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

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

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

実際に見てみましょう。

<div class="example">
  <p>縦方向への中央寄せ</p>
</div>

<p>縦方向への中央寄せ</p>

</div>

.example {
  /*親要素*/
  height: 150px;
}
.example p {
  /*上下に中央寄せするもの*/
  line-height: 150px;
}

.example {

/*親要素*/

height: 150px;

}

.example p {

/*上下に中央寄せするもの*/

line-height: 150px;

}

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

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

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

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

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

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

text-align:centerが効かない

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

margin: 0 autoが効かない

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

まとめ

いかがでしたか？

今回の記事では、

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

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

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

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。