SSブログ

中央寄せ

前にも書きましたが中央寄せの方法です。

中央寄せするブロック要素、サイトの内容全体の場合は、divです。
幅を指定して、左右のmarginをautoに設定します。
サンプルソースはこんな感じです。


分かりやすくするためにHTML内にCSSを記述していますが分けたほうがいいです。
中央寄せサンプルです。
ほとんどのブラウザで中央寄せになっているはずです。

ですが、IE6ではこの方法では中央寄せになりません。(うそです、理由は下に書いてあるとおりです)
IE6なんて使っていないという人は
Adobe BrowserLabを使ってみてください。
いろんなブラウザでの表示テストができるので、重宝します。

擬似的なものなので実際のブラウザでの表示と同じになるとは限りませんし、Javascriptの動作チェックなどもできないのであくまで表示のみのチェックです。

ここでIE6では中央表示できませんという結果になるはずだったのですが、Windows7 64bit、Vistaで、Adobe BrowserLabを使って表示させましたが、中央寄せになってしまってました。

なんでだろうと調べると、xml宣言を付けてなかったからのようです。
xml宣言を外すと中央寄せになるみたいです。
そんな情報あったかなと思ってさらに調べてみると、xml宣言をつけたときに互換モードになるからmarginのautoがきかないということでした。

ちょっと予定してたのと違いますが、ie6を考慮する場合は、外したほうがいいということが改めて分かりました。
xml宣言をつけた物

付けてもできないことはないですが、やろうとすると労力が半端無くかかります。
nice!(2)  コメント(0)  トラックバック(0)  [編集]
共通テーマ:パソコン・インターネット

nice! 2

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0

トラックバックの受付は締め切りました
広告スペース
Copyright © HTMLの基本から勉強してみる All Rights Reserved.

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。