センタリングの方法
皆さんが、デザインを作成する上で、意外と迷われるのがセンタリングです。
「センタリングの設定をしたんだけど中央に寄ってくれない」という相談をよく受けます。
何故上手くできないのか、何故迷うのか．．
それはインライン要素とブロック要素の仕組みをわかっていないからです。
インライン要素の事を私は「文字タイプ」という説明をします。
ブロック要素の事は、「BOXタイプ」という言い方をします。
※何がインライン要素で、何がブロック要素なのか、は 「インライン要素とブロック要素について」にて説明しております。
この、「文字タイプ」か、「BOXタイプ」か、によってセンタリングの方法は変わってきますし、flexboxの場合は、そのどちらでもできません。
そこを理解せず、どれも同じだと思ってる事が、上手くできない理由の一つであり、迷う理由です。
そこでこの3つのセンタリングの違いや設定方法を説明してみます。
１．文字タイプ（インライン要素）の場合
外側のBOX（親要素など）に「text-align: center;」を設定する
・文字がセンターに寄る
・BOXはセンターには寄らない
【裏テクニック】
インライン要素（画像など）に対し、「display: block;」を適用すると、ブロック要素に変更する事ができる。
そうすると、下記「２．」の方法が使えるようになり、新たなdiv要素を作る必要がなくなります。
【htmlのソースコード】
|
1 2 3 4 5 6 7 8 |
<figure class="text_center"> <img src="leaf2.jpg"> <figcaption>文章の羅列</figcaption> </figure> <figure> <img class="img_center" src="leaf2.jpg"> <figcaption class="text_center">文章の羅列</figcaption> </figure> |
【cssのソースコード】
※figure要素には解り易く背景色を設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
figure { background-color: #ffccff99; } .text_center { text-align: center; } .img_center { display: block; margin: 0 auto; } |
【表示サンプル】
２．BOXタイプ（ブロック要素）の場合
そのBOX自体に横幅（width）を指定し、「margin: 0 auto;」を設定する
・そのBOXはセンター揃えができる
・文字タイプ（インライン要素）はできない
※但し、BOXタイプ（ブロック要素）にする事で可能
【htmlのソースコード】
|
1 2 3 4 5 6 7 8 |
<figure class="block_center"> <img src="leaf2.jpg"> <figcaption>文章の羅列</figcaption> </figure> <figure> <img class="img_center" src="leaf2.jpg"> <figcaption><span class="inline_block_center">文章の羅列</span></figcaption> </figure> |
【cssのソースコード】
※figure要素には解り易く背景色を設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
figure { background-color: #ffccff99; } .block_center { width: 200px; margin: 0 auto; } .img_center { display: block; margin: 0 auto; } .inline_block_center { display: block; width: 200px; margin: 0 auto; } |
【表示サンプル】
３．flexbox（「display: flex;」を使ってる）の場合
「display: flex;」を使っている要素に「justify-content: center;」を設定する
・そのBOX内の子要素全体が中央に寄る
【htmlのソースコード】
|
1 2 3 4 5 6 7 8 9 10 |
<div class="flex_center"> <figure> <img src="leaf2.jpg"> <figcaption>文章の羅列</figcaption> </figure> <figure> <img src="leaf2.jpg"> <figcaption class="text_center">文章の羅列</figcaption> </figure> </div> |
【cssのソースコード】
※figure要素には解り易く背景色を設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
figure { background-color: #ffccff99; } .flex_center { display: flex; justify-content: center; } .text_center { text-align: center; } |
【表示サンプル】
