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

2016/01/18 ,

画像ファイルの img タグはインライン要素、そしてテキストを囲う段落を表す p タグはブロック要素です。テキストを装飾するための span タグや strong タグ、リンクの a タグはインライン要素となります。

インライン要素とブロック要素ではセンタリングの方法がそれぞれ異なりますが、中央寄せしたいタグがどちらの要素に属しているのか分かれば、今回紹介する方法で全て賄えます。中央寄せするための手段は複数ありますが、以下代表的なものを例に挙げて説明していきます。

※ 以下のサンプルでどこに対して中央寄せしているか分かるように、わざと枠線を付けるように予めスタイルを仕掛けてあります。

テキストの左右中央寄せ

まずは一番基本となるテキストの左右中央寄せの方法です。一般的にテキストは p タグや h1、h2、h3 等の見出しタグで囲います。p タグも見出しタグもブロック要素になるので、text-align で要素の中身がセンタリングされます。

center クラスを外側のブロック要素に設定することで、テキストが中央寄せになります。サンプルプログラムでは、当ブログの記事で利用している見出しとの混同を避けるために h4 タグを利用させていただきました。

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

見出し中央寄せ

画面の中央に寄せます。

画像 (img タグ) の左右中央寄せ – その1

続いて画像の左右中央寄せです。img タグはインライン要素です。よってテキストのセンタリング方法を上手く利用してあげれば簡単に中央寄せにすることができます。そのためには img タグをブロク要素のタグで囲ってあげれば良いです。

img タグをブロック要素の div タグで囲い、div タグに対して center クラスを適用させています。こちらの例では div タグを利用しましたが、同じブロック要素である p タグを利用しても中央寄せにできます。

画像 (img タグ) の左右中央寄せのサンプルその1

サンプル画像

画像 (img タグ) の左右中央寄せ – その2

img タグを中央寄せするために div タグで囲うのが面倒な場合、img タグへ css を設定してセンタリングさせることもできます。

img タグをブロック要素として認識させるために display を設定します。そして margin を左右どちらも auto にすることで、真ん中へ寄る仕組みとなっています。img タグを囲む要素はありません。画像自体が自ら中央に寄っているということです。

画像 (img タグ) の左右中央寄せのサンプルその2

サンプル画像

ブロック要素 (div タグ等) の左右中央寄せ

画像をブロック要素に変更した方法を応用すれば、div タグや p タグの要素自体を中央寄せにすることもできます。

div タグ、p タグ、table タグを例に挙げます。ブロック要素の width は何も設定しなければ、初期値が 100% となります。この状態では要素自身の左右に余白がないため、中央に寄せることもできません。よってブロック要素自体の幅を固定値もしくは 100% 以下の割合で設定することで余白を作り、左右のマージンで調整させることでセンタリングさせることができるようになります。

ブロック要素 (div タグ等) の左右中央寄せのサンプル

div 要素の左右中央寄せ div 要素の左右中央寄せ div 要素の左右中央寄せ div 要素の左右中央寄せ

p 要素の左右中央寄せ p 要素の左右中央寄せ p 要素の左右中央寄せ p 要素の左右中央寄せ

テーブル要素
table 要素の左右中央寄せ table 要素の左右中央寄せ table 要素の左右中央寄せ

テキストの上下中央揃え

上下に対する中央揃えは、ある一定の高さを持った外側のブロック要素に対して、内側の要素として中央に寄せるイメージです。

display を table-cell にすることで、td タグのような振る舞になります。このお陰で、親要素に vertical-align のスタイルを設定すると、子要素が上下中央揃えになります。一方で div の width が動的に動くようになるので、その点についてはご注意ください。

この状態では外側の div 要素に width 設定は固定値のみしか設定できず、width: 100%; のような指定はできません。幅を指定したい場合は、更に外側を div タグで囲み、その要素へ display: table; の style を設定すれば実装できます。(後述の上下左右の中央寄せの項で説明しています。)

テキストの上下中央揃えのサンプル

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

画像の上下中央揃え

テキストの上下中央揃えのコードと同様の方法で実装することができます。

画像の上下中央揃えのサンプル

サンプル画像

テキストと画像の上下中央揃え

上記ではテキストと画像を別々に取り扱っていましたが、画像とテキストが横並びになった際に上下中央揃えにするには、外側の要素だけでなく、内側の要素にも style 設定してあげる必要があります。

テキストが長い場合は、そちらの要素に width を指定しないと、二行目以降は画像の下にいってしまいます。またその場合はテキスト側の要素にも vertical-align を設定してあげると良いです。

テキストと画像の上下中央揃えのサンプル

サンプル画像テキスト上下中央揃え

テキストの上下中央揃え・左右中央寄せ

前述のサンプルの仕組みを組み合わせれば、上下左右の中央に寄せることも簡単にできるようになります。ただし、display: table-cell; を設定しただけでは、width をパーセントで設定することができません。よって更に外側を div 要素で囲って display: table; を設定すれば、好みの width を設定できるようになります。

テキストの上下中央揃え・左右中央寄せのサンプル

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

画像の上下中央揃え・左右中央寄せ

テキストで上下左右の真ん中に配置出来れば、画像ファイルも簡単です。

左右中央寄せで実装したのと同様に、display: block; で画像をブロック要素へ変更することがポイントです。前述のテキストの場合は、そもそも p タグがブロック要素であるため設定は不要でした。

画像の上下中央揃え・左右中央寄せのサンプル

サンプル画像

これで左右中央寄せも上下中央揃えも迷子にならず設定できますね。

PAGE TOP ↑