表（table）の中央揃え：CSS入門
CSS入門（24）
今回は、表（table）を中央揃え（センタリング）します。お話は、次の順番で進みます。
表（table）の中央揃え（センタリング）
1：前回までのお話
（01）
前回は、floatを使って、2段組みのレイアウトを行いました。
以下、前回までのCSSコードです。
2：今回、行うこと
（02）
見ていると表（table）が左寄りで気になります。今回は、表（table）を、中央揃えにしてみましょう。
3：text-alignであかんのかい！？
（03）
記事「文字の左右・中央揃え【text-align】：CSS入門」では、h1大見出しをtext-alignを使って中央揃えにしました。
それなら、表（table）もtext-alignで出来そうですが、残念ながら出来ません。この中央揃え（センタリング）ってのは、なかなか話がややこしいのです。
（04）
それでは、実際に出来ないことを試してみましょう。#blog-info（1：ブログの情報）の中の表（table）に、「text-align」をかけてみます。
（05）
ブラウザで表示してみましょう。あらやだ、table（表）の中の文章が中央揃え（センタリング）になっています。
（06）
今度は、#blog-info（1：ブログの情報）に、「text-align」をかけてみます。（<div>タグにかけるわけです）
（07）
ブラウザで表示してみましょう。h2見出しは中央揃え（センタリング）になりましたが、table（表）は微動だにしません。
4：それなら、<center>で、ええやないか！
（08）
「<center>タグを使えばいいじゃないの！パンが無いなら、ケーキを食べればいいじゃないの！」と思う人もいらっしゃるかもしれませんが、非推奨タグなので、残念ながら駄目です。
また、FC2ブログのプラグイン（HTML文）などでも使われている「align="center"」をタグに付ける方法も、本来、<center>タグと同じ意味なので推奨されるものではないようです。
5：表（table）の中央揃え（センタリング）
（09）
前フリが長くなってしまいましたが、「表（table）の中央揃え（センタリング）」を行う方法を書きます。
次のように、<table>タグに対して、marginの左右に「auto」を指定することで、中央揃え（センタリング）できます。
とりあえず、「text-align: center;」は、削除しておいてください。
（10）
ブラウザで表示してみましょう。表（table）が中央揃え（センタリング）になっているはずです。
6：まとめ
（11）
試していただくと分かりますが、おそらく次のような場合には、「text-align:center;」で中央揃え（センタリング）できないはずです。
- <table>タグ（表）
- <img>タグ（画像）
- <div>タグ（グループ）
などなど。
（12）
これらの対象を、中央揃え（センタリング）するときのポイントは、次の2点です。
- 幅（width）を指定する。
- 「margin-left: auto;」と「margin-right: auto;」を指定する。
tableなどのもともと幅（width）の値をもっている対象に対しては、幅を指定しなくても構いません。
IE（Internet Explorer）の問題
実は、話はまだ終わりません。また、IE（Internet Explorer）のバグに対応しなければいけないのです。
1：IE（Internet Explorer）で見てみましょう
（01）
前項で、marginに「auto」を指定することで解決したはずの中央揃えですが、IE6で見てみると、中央揃えになっていません。
どうやら、IE6が互換モードになっている場合、及びそれ以前のIEブラウザは、バグによって中央揃え（センタリング）されないようです。
2：IEのバグをバグを利用して中央揃え（センタリング）する
（02）
marginの「auto」に加えて、IEのバグ用の記述が必要です。IEのバグ対策には、「text-align:center;」を使います。
これは、バグに対して、バグで対応するという摩訶不思議なお話です。
#blog-info（1：ブログの情報）に、「text-align」をかけます。（<div>タグにかけるわけです）
（03）
IEブラウザで確認してみましょう。IEでもtableが中央揃え（センタリング）できましたが、h2大見出しまで中央揃えになっています。
さて、どうしたものでしょう？・・・どうするかは、そのときどきの状況に寄りそうです。
（04）
今回は、入門編なので、後で見たときに混乱しない方法で書いておきたいと思います。
まず、「text-center」というクラスを作成し、「text-align:center;」を記述しておきます。
（05）
<table>タグを、新たに<div>タグで囲み、クラス「text-center」を付けます。
（06）
IEブラウザで確認してみましょう。表（table）だけが中央揃えになっているはずです。
3：他の方法
（07）
他には、<body>タグに「text-align:center;」をかけて、中央に寄せないタグを一括して「text-align:left;」してしまうのもひとつの方法かと思います。
もちろん、もっと良い方法があるかもしれませんけれど、そのサイト、ページ、更新する人のスキルを鑑みて、決めていけば宜しいかと思います。
ベストな方法はありません。何しろ、最もベストなのは、みんなが IEブラウザを使わないことです。
参考サイト
今回の説明だけでは、そのときどきの状況に対応できまないはずなので、参考になるサイトをご紹介いたします。
- Web標準普及プロジェクト「ブロックレベル要素をセンタリングする方法」
- 小粋空間「CSSでブロックレベル要素をセンタリングする」
- 小粋空間「CSS でブログ本文の画像だけをセンタリングする」
おそらく、中央揃え（センタリング）に関するお話を書いている人は、ほぼ『Web標準普及プロジェクト』さんのページを参考にさせていただいているものと思います。きっちり書かれています。
また、『小粋空間』さんのページは、整理されて、とても分かりやすく書かれています。
次回予告
次回は、リンクに関するCSSの指定について書く予定です。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
- 表（table）の中央揃え（この記事です）
14：CSSで飾る
15：まとめ
作成日：2008/05/11 更新日：2008/05/11
« 「段組みレイアウト【float】」｜「CSSでリンクを装飾する」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/294-a89834f6
