テンプレートを左右中央寄せにする

テーブルを使用すれば簡単にテンプレートを左右中央寄せできるのですが、ここでは、テーブルタグを使わずにテキストを上下中央揃えする方法を紹介します。

実はテンプレートを左右中央寄せする方法は2種類あります。

１．絶対配置でテンプレートを左右中央寄せ

テンプレート（サイトの大枠）をdivで囲んで、縦と横のサイズを決めます。絶対配置で基点をページの真ん中に配置、テンプレートの半分の大きさだけ、上と左にmarginで移動させれば、テンプレートをページの中央に配置することができます。overflowをhiddenに指定しておかないと、縦方向のコンテンツ領域がheightで指定したサイズより大きい場合は、スクロールバーが出てしまいます。

最小限CSSソースは以下のようになります。

CSSコード

div#wrapper {
   position:absolute;
   top:50%;
   left:50%;
   width:700px;
   height:410px;
   overflow:hidden;
   margin:-205px 0 0 -350px;
}

(X)HTMLコード

<div id="wrapper">
   <div id="header"> </div>
   <div id="contents"> </div>
   <div id="footer"> </div>
</div>

サンプルとしては当サイトで配布しているCSSテンプレートを参考にしてみてください。

CSSソースはこちらから。

２．inline-block要素でテンプレートを左右中央寄せ

この方法は、本来ブロック要素であるdivをインライン要素にしてしまうというちょっとトリッキーな技です。

例えば、2つのコンテンツ（記事領域とメニュー領域）を横並びにして、左右中央寄せにする場合、displayにinline-block（Firefox用には-moz-inline-box;）を指定します。 そうすると｢vertical-align:middle;｣によって、縦方向のセンタリングが有効になるという仕組みです。

inline-blockはインライン要素なので、勝手にコンテンツが横並び状態になります。

CSSコード

#main {
   display: inline-block;/* Opera Safari用 */
   display:-moz-inline-box;/* Firefox Netscape用 */
   vertical-align:middle;
   width: 100px;
}

#sub {
   display: inline-block;/* Opera Safari用 */
   display:-moz-inline-box;/* Firefox Netscape用 */
   vertical-align: middle;
   width: 100px;
}

/* IE 6 */
* html #main,
* html #sub{
   display:inline;
   zoom:1;
}

/* IE 7 */
*:first-child+html #main,
*:first-child+html #sub{
   display:inline;
   zoom:1;
}

p {
   width: 100px;
}

(X)HTMLコード

<div id="main">
<p>中身</p>
</div><!--
--><div id="sub">
<p>中身</p>
</div>

この方法は、当サイトのコラムで詳しく解説しているので、そちらも参考にしてください。

テーブルタグを使わずにテキストを上下中央揃えする方法 [Cool Web Window]