読者です 読者をやめる 読者になる 読者になる

ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

margin:autoセンタリングCSS

WEBサイト制作時に、最近はブラウザウィンドウの中央にコンテンツ表示させるセンタリングがかなり標準的に
なってきました。

CSSで制御する場合、margin:auto;でdivタグなどのブロックレベル要素を中央に表示させるわけですが、
記述方法と×などについてまとめてみました。


IE9がリリースされているので、IE6のユーザーはいないのではないかと思われるWEBデザイナーも増えてきているのかもしれませんが、当方の統計ではまだ結構ユーザー数が多かったりします。

Windows版IE6の場合ですが、バグの影響でmargin:auto;指定の場合、text-align:center;を追記しないと、センタリングがされません。


また、標準モード(互換モードとはソースコードの解釈が違う)でなければセンタリングされないのです。


【margin:auto;について】

margin:autoの記述については以下のような指定方法があります。

1.margin:auto

2.margin-left:auto; margin-right:auto

3.margin:0px auto;

4.margin:0px auto 0px;