CSS で HTML 内の画像やテキストを中央寄せにする方法

2015/12/24

CSS の左右中央寄せ・上下中央寄せにはいくつか実装方法がありますが、根本的な考え方は大きく分けて2つになります。

  1. 外側のブロック要素にスタイルを設定して、内側の要素を中央寄せにする
  2. 内側のブロック要素にスタイルを設定して、中央寄せになるようにする

言葉だけでは何を言っているのか分からないかもしれませんが、仕組みが2パターンしかないことをまず覚えておいてください。

細かい話をすると、インライン要素とブロック要素のセンタリング方法が異なるのですが、具体的に実装方法を見てもらったほうが理解しやすいと思います。それでは代表的な中央寄せの方法について、サンプルプログラムを用いて解説していきます。

テキストの左右中央寄せ

一番基本となるのがテキストの左右中央寄せです。一般的にテキストは p タグや h1, h2 等の見出しタグで囲まれます。これらのタグは「ブロック要素」になるので、次のように実装します。

テキストを左右中央寄せにする【HTML】
<p class="center">テキストを中央寄せにする</p>
テキストを左右中央寄せにする【css】
.center{
  text-align: center;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

テキスト左右中央寄せのサンプル

テキストを中央寄せにする

ポイント

text-align: center はブロック要素の中身を左右中央寄せにする場合に用いる

ブロック要素内の画像を左右中央寄せ

ブロック要素で囲まれた画像ファイルは、テキストと同じ方法でセンタリングできます。

ブロック要素内の画像を左右中央寄せにする【HTML】
<div class="center">
  <img src="画像のURL" alt="サンプル画像" />
</div>

ブロック要素の div タグ内に画像を配置しています。div ではなく p タグでも構いません。

ブロック要素内の画像を左右中央寄せにする【css】
.center{
  text-align: center;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

スタイルシートは先程と同じものを使います。

ブロック要素内の画像を左右中央寄せするサンプル

CSS説明用サンプル画像
ポイント

img タグは「インライン要素」なので、中央寄せの定義は外側のブロック要素に設定する!

外側の要素に依存せず画像を左右中央寄せにする

img タグを中央寄せするためには、必ずしもブロック要素で囲う必要はありません。ここでは img 要素をブロック要素に変換して、自ら中央寄せになるようなスタイルを設定します。これは冒頭で説明した ② の実装です。

画像をブロック要素化して左右中央寄せにする【HTML】
<img class="disp-block blockcenter" src="画像のURL" alt="サンプル画像" />

外側の要素に依存しないので、用意するのは img タグのみです。

画像をブロック要素化して左右中央寄せにする【css】
.disp-block {
  display: block; /* これでブロック要素の扱いになります */
}
.blockcenter{
  margin-left: auto;  /* 【ポイント】*/
  margin-right: auto; /* 【ポイント】*/
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

ブロック要素が自ら中央寄せになるために、左右のマージンに auto を設定しています。先程は、中央寄せの設定を仕掛けた p タグや div タグにボーダーを設定しましたが、ここでは内側の img 要素にボーダーが設定されるので、その違いが一目で分かります。

画像をブロック要素化して左右中央寄せするサンプル

CSS説明用サンプル画像

ポイント

ブロック要素を左右中央寄せするには、左右のマージン設定を auto にする!

ブロック要素の左右中央寄せ

前項と内容は同じですが、img タグへの設定を理解できた人も必ず目を通してください。

div や p タグのようなブロック要素は、何も設定しないと横幅は 100% になります。つまり横幅が 100% の要素はいくら中央寄せの設定をしても、見た目は中央に寄らないのです。

そこでブロック要素を中央寄せにするには、要素の横幅を設定することが重要になります。前項は img 要素にサイズが指定してあったため、自動的にこのルールが適用されただけなのです。

ブロック要素内の左右中央寄せ【HTML】
<div class="wd60 blockcenter">div 要素の左右中央寄せ</div>
<p class="wd200px blockcenter">p 要素の左右中央寄せ</p>
<table class="blockcenter">
  <tr><th>テーブル要素</th></tr>
  <tr><td>table 要素の左右中央寄せ</td></tr>
</table>

table タグは特殊で内部のセル値に応じて横幅が決まるので、ここでは width を設定する class は指定していません。

ブロック要素内の左右中央寄せ【css】
.wd60 { width: 60%; }
.wd200px { width: 200px; }
.blockcenter{
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

中央寄せにするのはブロック要素だけです。その中に書かれたテキストはセンタリングされず、左寄せになります。

ブロック要素の左右中央寄せサンプル

div 要素の左右中央寄せ

p 要素の左右中央寄せ

テーブル要素
table 要素の左右中央寄せ
ポイント

ブロック要素を左右中央寄せにするには横幅のサイズを設定する必要がある

テキスト・画像(インライン要素)の上下中央揃え

インライン要素の上下中央揃えを実現するには、外側を2重のブロック要素で囲みます。

インライン要素の上下中央揃え【HTML】
<!-- テキスト -->
<div class="vartical-middle">
  <p class="vartical-middle-child">上下中央に揃えます。<br />
  要素内で改行していても問題はありません。</p>
</div>

<!-- 画像 -->
<div class="vartical-middle">
  <div class="vartical-middle-child">
    <img src="画像のURL" alt="サンプル画像" />
  </div>
</div>

ブロック要素の div タグ内に画像を配置しています。div ではなく p タグでも構いません。

ブロック要素内の画像を左右中央寄せにする【css】
.vartical-middle {
  display: table;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}
.vartical-middle-child {
  display: table-cell;
  height: 300px;           /* 【重要】高さを設定します */
  vertical-align: middle;  /* これで上下中央揃えになります */
}

table タグ内のセルは、仕様上 vartical-align の設定をすれば上下中央揃いになります。この性質を利用したのがここでの実装です。つまり一番外側のブロック要素をテーブルタグのように振る舞わせ、内側のブロック要素をセルとして動くように display 設定をしています。

なおセル部分の高さを設定しないと詰まってしまうので、強制的に高さを設定しています。

ブロック要素内の画像を左右中央寄せするサンプル

上下中央に揃えます。
要素内で改行していても問題はありません。

CSS説明用サンプル画像
ポイント

ブロック要素を二重にして、テーブルタグのような作りにすれば上下中央揃えにすることができる!

テキスト・画像(インライン要素)の上下左右中央揃え

前述で紹介した内容を組み合わせれば、上下左右の中央寄せを一気に設定することができます。ここまでの内容が理解できてれば、必要な css もイメージできるのではないでしょうか。

インライン要素の上下左右中央揃え【HTML】
<!-- テキスト -->
<div class="vartical-middle">
  <p class="vartical-middle-child">上下中央に揃えます。<br />
  要素内で改行していても問題はありません。</p>
</div>

<!-- 画像 -->
<div class="vartical-middle">
  <div class="vartical-middle-child">
    <img src="画像のURL" alt="サンプル画像" />
  </div>
</div>

HTML は先程と同じものを使いましょう。あとは css に一工夫するだけです。

インライン要素の上下左右中央揃え【css】
.vartical-middle {
  display: table;
  width: 100%;        /* 外枠を拡張します */
  text-align: center; /*【基本】インライン要素の中央寄せ */
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}
.vartical-middle-child {
  display: table-cell;
  height: 300px;
  vertical-align: middle;
}

外側の要素を table として扱う設定(display: table)に変更したため、内部の要素サイズに合わせて横幅が動的に変わってしまいます。そこで横幅に 100% を設定しています。あとはインライン要素を中央寄せする text-align: center を設定すれば完了です。

インライン要素内の画像を左右中央寄せするサンプル

上下中央に揃えます。
要素内で改行していても問題はありません。

CSS説明用サンプル画像

テキストを左寄せのまま中央寄せにするのであれば、次の項で説明するブロック要素に対する上下左右中央揃えを適用してください。

ポイント

テーブル化による上下中央揃えを適用させたまま、内側にはインライン要素の中央寄せを適用する!

ブロック要素の上下左右中央揃え

ここまでできれば、対象がブロック要素であっても問題なく実装できるはずです。

ブロック要素の上下左右中央揃え【HTML】
<div class="vartical-middle">
  <div class="vartical-middle-child">
    <p class="blockcenter wd200px">上下中央に揃えます。<br />
    要素内で改行していても問題はありません。</p>
  </div>
</div>

HTML は先程と似ていますが、2階層から3階層へ深くなっています。

先程は p タグ内のテキストが中央寄せされましたが、ここでは p タグ自体を中央寄せします。つまり内側のテキストは左寄せを維持したままになります。

ブロック要素の上下左右中央揃え【css】
.vartical-middle {
  display: table;
  width: 100%;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}
.vartical-middle-child {
  display: table-cell;
  height: 300px;
  vertical-align: middle;
}
.wd200px { width: 200px; }
.blockcenter{
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

前述のインライン要素の場合と仕組みはほとんど同じです。あとは最終的に中央寄せしたいブロック要素の横幅を指定して、左右のマージンに auto を設定します。

ブロック要素内の画像を左右中央寄せするサンプル

上下中央に揃えます。
要素内で改行していても問題はありません。

ポイント

テーブル化による上下中央揃えを適用させたまま、内側にはアウトライン要素の中央寄せを適用する!

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索