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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

max-widthというのは何ですか?

田島悠介

領域の幅の上限を指定することができるんだ。実際にやってみよう。

 

中央寄せの書き方

サイトの外観を統一したり、レスポンシブなデザインを作成する際に各要素を中央寄せする方法が有効な時があります。

ここでは領域全体を中央寄せする場合と、テキストや画像を中央寄せする場合の例を挙げます。

 

実際にセンタリングしてみよう

領域を中央寄せする→max-widthとmarginを使う

max-widthは領域の幅の上限を設定するプロパティです。ここで値を%で指定します。
次に、中央寄せする要素のmarginの値を0 autoにします。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <p>領域を中央寄せする</p>
    </div>
  </body>
</html>

CSS

div {
  max-width: 50%;
  background-color: #eee8aa;
  margin: 0 auto;
}

画面では以下のように表示されます。背景色に#eee8aaを設定した領域が画面全体幅の中央に配置されています。

cent_p_1r

また、max-widthを50%に設定しているため画面の幅が変更されても元の比率を維持して表示されます。

cent_p_3

ここでは領域内のテキストについてはセンタリングを行っていないため、中の文章は通常通り左詰めの表記になっています。

 

田島悠介

まずは領域を中央寄せにしてみたよ。

大石ゆかり

画面全体の幅を小さくしても、設定したパーセントの分が維持されるんですね。

田島悠介

次はこの領域内のテキストも中央に配置してみよう。今度はtext-align:centerを使うよ。

 

テキストを中央寄せする→text-align:centerを使う

次にテキストを中央寄せするためにtext-alignプロパティを使用します。
日本語表記の場合text-alignの初期値はleftに設定されており、デフォルトでは左寄せで表示されます。(text-alignの初期値は言語により異なります)このtext-alignの値をcenterに変更します。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <p>領域とテキストを中央寄せする</p>
    </div>
  </body>
</html>

先ほどと同様に領域自体を中央寄せにし、今度は中のテキストにtext-align:centerを設定します。

CSS

div {
  max-width: 50%;
  background-color: #eee8aa;
  margin: 0 auto;
}
p {text-align:center; }

画面ではこのように表示されます。領域全体と中の文章が両方ともセンタリングされました。

cent_p_2r

テキストは画面全体の幅に応じて自動で改行され、常に中央寄せで表記されます。

cent_p_4

 

画像を中央寄せする方法の例

text-alignは文章だけでなく、画像などの他のインライン要素にも使用することができます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <img src="photo1.png">
    </div>
  </body>
</html>

CSS

div {text-align:center;}

ここでは<div>の領域内に<img src=””>で画像を挿入し、<div>にtext-align:centerを指定しています。

画面ではこのように表示されます。text-alignはブロック要素内のインライン要素に適用されるため、画像は中央に配置されます。

cent_p_5

 

以上、CSSでセンタリングする方法を紹介しました。

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

田島悠介

最後に画像に関するセンタリングの例を見てみたよ。

大石ゆかり

text-alignというのは文字列に使うものだと思っていましたが、こんな利用方法もあるんですね。

田島悠介

text-alignについて注意することは、適用されるのはインライン要素でありブロック要素には使えないという点だね。

大石ゆかり

扱う対象についても注意したいです。ありがとうございました!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

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