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

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

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

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

テキストの左右中央寄せ

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

<p class="center">テキストを中央寄せにする</p>

.center{
  text-align: center;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

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

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

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

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

<div class="center">
  <img src="画像のURL" alt="サンプル画像" />
</div>

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

.center{
  text-align: center;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

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

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

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

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

<img class="disp-block blockcenter" src="画像のURL" alt="サンプル画像" />

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

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

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

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

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

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

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

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

<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 は指定していません。

.wd60 { width: 60%; }
.wd200px { width: 200px; }
.blockcenter{
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed #999; /* わかりやすくボーターを付けておきます */
}

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

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

p 要素の左右中央寄せ

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

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

<!-- テキスト -->
<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 タグでも構いません。

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

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

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

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

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

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

<!-- テキスト -->
<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 に一工夫するだけです。

.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 を設定すれば完了です。

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

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

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

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

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

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

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

.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 を設定します。

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