を執筆。（2007/05/19 毎日コミュニケーションズより発行）
私のドメインサイトのトップ www.wanichan.com では、 JavaScriptを使って月ごとに画像の差し替えを行っているわけだけど（かなり前に書いたヘボすぎのスクリプト）、 パターンのほとんどはテーブルレイアウトを使ってる。
Internet Explorerでは、<div style="text-align:center">で、 うまくセンタリングしてくれるけども、Firefoxではそうはいかない。
センタリングしたい場合は、divで囲む方法があるけれども、そのdivを選択したあと、左下の［タグのプロパティ］ 作業ウィンドウを開いて、［style］欄に
margin: 0 auto;width:50%;overflow:visible
と指定するとできた。
- margin: 0 auto → Firefoxでセンタリングするために、上下のマージンを0、 左右のマージンを自動で
- width: 50% → とにかく幅を指定する。最小幅でOK
- overflow:visible → 指定幅より実際の幅の方が広い場合、強制的に全部表示させる
［style］ボックスの右側に ［...］ボタンがあるので、そこをクリックすると、スタイルの作成がちょっと簡単かもしれない。
- ［ボックス］カテゴリを開き、「すべてに同じ数値を使用する」のチェックを外して、
top と bottom を「0」、 left と right を「auto」と入力 - ［配置］カテゴリを開き、width値に最小値を指定
- ［レイアウト］カテゴリを開き、overflow値を「visible」に設定
- ［OK］ボタンをクリック
※ text-align:center という記述を行った場合、その中に囲まれた要素がすべてセンタリングしてしまうので注意。 解決策としてその中の要素を、text-align:leftと指定する。
