中央寄せしたい!CSSでセンタリングする方法【初心者向け】

初心者向けにCSSで画像や文字をセンタリング(中央寄せ)する方法を解説。Webサイト上に画像などの要素を中央寄せさせたい時に便利です。サイトをデザインする際には常に必要となる知識なので、覚えておいて損はないでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

CSSでセンタリング(中央寄せ)する方法を解説しています。

サイト内の画像を真ん中に表示したいという時にとても便利な技術です。初心者の方でも自分で書けるようになっておくと良いでしょう。

領域を中央寄せする方法、テキストや画像を中央寄せする方法を実際にソースコードを書きながら紹介しています。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

大石ゆかり

田島メンター!!画面内の要素を常に中央に配置したいのですが、どうしたらいいですか~?

田島悠介

色々方法があるけれど、最初に text-align : center を使ってみようか。

大石ゆかり

どうやって使えば良いでしょうか?

田島悠介

画像を囲っているdiv領域にCSSを付与するんだ。実際にやってみよう。

目次

画像を中央寄せに表示する方法

まずは、画像を中央寄せに表示するサンプルを見てみましょう。

div領域内でimg要素をセンタリングして表示する

画像を中央寄せに表示させるためには、画像の外枠となるdiv要素にtext-align : center を付与します。

画像そのものではなく、親要素にCSSを付与することに注意しましょう。

また、div領域にtext-align : center を付与すると、領域内の子要素だけでなく、孫要素を含む全ての要素に効果が発生します。

効果は、「各インライン要素に発生し、センタリングの基準は各要素の1階層上の要素である」という点に注意しましょう。こちらの画像の場合、画像の親要素がdivであり、div領域の幅を基準に画像がセンタリングされていますね。ブロック要素には無効であることにも気を付けましょう。

上記の例では、わかりやすくdiv領域に border : solid 1px を付与して、枠が目に見えるようになっていますが、div領域が目に見えない場合は text-align : center を付与しても「何を基準にセンタリングされたのか」わからずに混乱することもあります。

div領域に border : solid 1px を付与することで中央寄せの基準が確認しやすいということも覚えておきましょう。

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

領域を中央寄せに表示する方法

div領域そのものや、text-align : center ではセンタリングできなかった要素を中央寄せするには、margin : 0 auto を使いましょう。

ブロック要素を margin : 0 auto でセンタリングして表示する

divなどのブロック要素を中央寄せするには、中央寄せしたい要素に margin : 0 auto を付与します。

img要素をセンタリングした時と違って、「div要素のセンタリング」という文字列は中央寄せになっていません。

この文字列はpタグの中にテキストを記述して表示していますが、今回このpタグには何もCSSを付与していないためです。

marginプロパティは、付与したブロック要素の外側の余白を調整するものです。ですから、上記のグラデーション領域の左右のマージンが自動調整されて、中央寄せされています。

「margin : 0 auto」は暗記されている方も多いと思いますが、0の部分は上下のマージンに相当するため、既存マージン指定と競合を起こして表示に不具合が起こる場合があります。その場合は、margin-left : auto、margin-right : auto と指定することで、縦方向に影響を及ぼさずにブロック要素のセンタリングができます。

CSSでセンタリングを成功させるコツ

実際にWEBサイトの画面をデザインしている時に、レイアウト表示に不具合が出てハマった!という方も多いと思います。

こうした状況を解決するためのヒントを記載しておきますので、ぜひ参考にしてください。

  • インライン要素とブロック要素の違いを理解する
  • 外枠のdiv領域のサイズ指定をする
  • ブロック要素を中央寄せにしたい場合はwidthを〇〇%に指定する
  • ブロック要素内のテキストをセンタリングして不具合が起こる場合

 

1.インライン要素とブロック要素の違いを理解する

HTML要素は、インライン要素とブロック要素の2つに大別されます。

インライン要素とは、<img>タグや<span>タグが有名で、これらの要素は画面に横並びに表示されます。また、インライン要素特有の特性を持ちます。

ブロック要素とは、<div>タグや<p>タグが有名で、これらの要素は画面に縦並びに表示されます。また、デフォルトの幅が親ブロック要素の枠内100%に広がりますので、margin : 0 auto を指定しても、デフォルト幅では何も変化が起こりません。

2.外枠のdiv領域のサイズ指定をする

div領域は、デフォルトでは領域が存在しません。領域内に文字列や他要素があると、その分だけ高さが確保され、幅が100%広がります。

状況に応じて、枠内のコンテンツよりも大きめのサイズで height と width を指定して外枠を明確にしましょう。

3.ブロック要素を中央寄せにしたい場合はwidthを〇〇%に指定する

センタリング処理は、大き目の枠内にある、枠より小さい要素を真ん中に移動させる処理ですので、ブロック要素のデフォルトの幅100%のままでは中央寄せ処理は成功しません。

中央寄せしたい枠内ブロック要素コンテンツに、width : 60% などの値を指定しましょう。

4.ブロック要素内のテキストをセンタリングして不具合が起こる場合

例えば、<p>タグで囲ったテキストを中央寄せにしたい場合、text-align: center を使うと、以下のように長めのテキスト文章が不自然に中央寄りになります。

このような場合には、<p>タグの幅をwidth : 80% 程度に調整して、margin-left : auto , margin-right : auto を付与することで、テキスト文章を左寄りにレイアウトした状態で、文章全体のブロックは中央寄せに表示するといった配置が成功します。

また、大枠のdivでtext-align : center を指定した状況で、文章そのものは左寄りにしたい場合、<p>タグにtext-align : initial を付与することで、テキスト中央寄せの指定を個別解除することができます。

 

大石ゆかり

ずっとCSSでハマっていた原因がやっとわかりました!

田島悠介

ブロック要素とインライン要素は別々に考える必要があるんだ。

CSSによる中央寄せデザインのサンプルプログラム

解説で登場した画面レイアウト表示に使ったプログラムをご紹介します。

実際にどんなCSSを適用しているのか、確認してみましょう

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HelloTechAcademy</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p id="title">Hello TechAcademy !</p>
    <div id="mainArea">
      <img src="https://magazine-cf.techacademy.jp/wp-content/uploads/2020/06/22235823/css_centering_cafe.jpg">
      <p id="text01">HTML要素には、ブロック要素とインライン要素があります。</p>
    </div>
    <div id="secondArea">
      <div id="blockItem">
        <p>こんにちは</p>
      </div>
      <p class="p-custom">div要素のセンタリング</p>
    </div>
  </body>
</html>

CSS ( sample.css )

#title {
    margin-bottom: 4px;
}

#mainArea {
    width: 300px;
    margin-bottom: 18px;
    padding:2px;
    border : solid 1px;
    text-align: center;
}

#mainArea img {
    width: 60%;
}

#text01 {
    width: 80%;
    margin-left : auto;
    margin-right: auto;
    text-align: initial;
}

#secondArea {
    width: 300px;
    height: 150px;
    margin-top: 18px;
    padding:2px;
    border : solid 1px;
}

#blockItem {
    width: 200px;
    height: 80px;
    padding-top: 25px;
    background-color: #08AEEA;
    background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
    text-align: center;
    margin: 0 auto;
}

.p-custom {
   text-align: center;
   margin-top: 2px;
}

まとめ

CSSでセンタリングするには、text-align : center や margin : 0 auto だけでなく、インライン要素やブロック要素、領域のサイズ確保など、思ったより多くの仕組みを理解する必要があります。

Webサイト制作においても必ず必要となる知識になるので、ぜひ覚えて実践でも使えるようにしておきましょう。

執筆してくれたメンター

寺谷文宏(Teratani Fumihiro)

Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAcademyではフロントエンド、Javaコースを担当。

 

田島悠介

ハマった時に何を調べて、どう解決するかが重要なんだ。

大石ゆかり

今回、解決のコツをたくさん教えていただいたので、なんとかなりそうです。

田島悠介

要素や構造を、ひとつひとつ確認していくと、すんなり解決できるよ。

大石ゆかり

はい、がんばります。ありがとうございました!

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。