私のドメインサイトのトップ 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と指定する。
posted by wanichan at 11:08
|
Comment(0)
|
TrackBack(0)
|
Expression Web