[ CSS ] ページ全体をセンタリングする方法

2006年10月25日2008年7月3日

CSS でページ全体をセンタリングする方法を自分用にメモ。

body {
text-align: center; /* center on ie */
width: 100%;
}
#container {
text-align: left;
margin: 0 auto; /* center on everything else */
width: 720px;
}

ポイントは、Windows IE6 用に text-align:center を指定する事。

私の場合、#container に width を指定すんの忘れててハマった（笑）

問題解決には、ブロックレベル要素をセンタリングする方法 – Web 標準普及プロジェクトというページが大変参考になりました。ありがとうございます。

3 COMMENTS

CSS Lecture 2008年5月27日

CSSで中央配置（センターリング）する方法

ＣＳＳで中央配置の仕方をちゃんと理解していない人って案外いるみたいなので、詳しく…

小山　武 2016年5月27日

初めまして。ワードプレスを利用してサイトを製作しているものです。特定のページだけ横幅を自動調整しページ全体を中央表示できるようにしたいのですが思うようにできません。
その特定ページだけはグローバルメニューやヘッター、フッター、サイドバーも削除しました。
参考サイトはこちらhttp://yudnaliatah.com/wordpress-keni-lp-2670

ページ全体を自動で中央表示するためいろいろ調べるのですが、どのサイトでも「CSSに付け加えてください、書き換えてください」と明記されているだけで、どの場所に付け加え、書き換えすればよいかわかりません。とりあえずCSSということなので、管理画面～外観～テーマの編集～BizVektor: ランディングページ固定ページテンプレート (pagelp-writing.php)→上記に書いた特定ページのCSSになります
のCSSに明記されている文面をいろいろな場所に付け加えて試しましたが全くうまくいきません

中央表示できない理由は
　そもそもCSSの変更場所が違う
　文面を入力する場所が違う
　文面を入力した分削除しなければならない文面がある

いろいろなことが考えられると思いますが
初心者のためCSSの事さえよく分かっていません。

突然のお問合せまことに恐縮いたしますが何卒よろしくお願い申し上げます。

例えば貴社のメモはどこの場所に入力すればよいですか？

body {
    text-align: center; /* center on ie */
    width: 100%;
}
container {
    text-align: left;
    margin: 0 auto; /* center on everything else */
    width: 720px;
}