ページ全体のバランスを考える際に必ず必要なのがセンタリングです。センタリングにより好みの位置に自由に配置できるようになることは必須といえます。ここではその様々なセンタリング方法を紹介します。
左右のセンタリング：インライン要素の場合
インライン要素をセンターに寄せる場合は、その要素を含むブロック要素に「text-align: center;」を使用します。ここで、インライン要素とはテキストや画像を指し、<div>や<p>はブロック要素になります。
|
1 2 3 4 5 |
.sample{ background:#ccc; padding:20px 0; text-align:center; } |
|
1 2 3 |
<div class="sample"> あああ </div> |
左右のセンタリング：ブロック要素の場合
ブロック要素をセンターに寄せる場合は、その要素に「margin:0 auto;」を使用します。左右に対してautoが働くために中央に動いてくれます。
|
1 2 3 4 5 6 7 8 9 10 11 |
.sampleWrap{ height:100px; background:#ccc; } .sample{ width:100px; height:100px; background:#888; margin:0 auto } |
|
1 2 3 |
<div class="sampleWrap"> <div class="sample">あああ</div> </div> |
上下のセンタリング：インライン要素の場合
ここでは、組み合わせとしてtable-cellを使います。これはHTMLのtableタグをCSSで再現するものですが、こちらを使用するとHTMLで使用可能だったvertical-align（縦の並びを制御する）が使用できます
|
1 2 3 4 5 |
.sample{ background:#ccc; display:table-cell; vertical-align: middle; } |
|
1 2 3 |
<div class="sample"> あああ </div> |
上下のセンタリング：ブロック要素の場合
ブロックの上下中央寄せに「position: absolute;」使用します。最後に「margin:auto;」を使用すればできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.sampleWrap{ height:300px; background:#ccc; } .sample{ position:absolute; width:100px; height:100px; background:#888; margin: auto } |
|
1 2 3 |
<div class="sampleWrap"> <div class="sample">あああ</div> </div> |
まとめ
センタリングは適用したい要素がインラインかブロックかによって変わってきます。違いを把握して、うまく使い分けていきましょう！
