ページが真ん中にならない ページ全体を中央に表示(センタリング)
考え方】
ページ全体を中央表示した場合には、ページ全体である<body>~</body>の中に<div>~</div>を入れ、その<div>~</div>を中央に表示する事で可能になります。 下記の3段階の指定方法を同時に指定する事で実現します。 text-align:center; margin-left:auto;margin-right:auto; text-align:left; ホームページ全体を中央寄せで表示する方法 ●center.html <style> body{ text-align: center; } div#center { width: 450px; height: 800px; text-align: left; background: #AAAAAA; margin: auto; } h1 { text-align: center; } ・・・省略・・・ </style> </head> <body> <div id="center"> <h1>要素の中央寄せ</h1> <p>「margin」プロパティを使ってページ全体を中央に寄せています。</p> </div> </body> ページ全体(body内にあるタグ全て)を<div>タグで囲い、一番外側のdivブロックに対して中央寄せの設定をします。ブロックの中央寄せですので「margin」プロパティを使います。ページ全体に一つの設定ですのでid属性に設定するようにdiv要素のIDセレクタ(div#center)に「margin: auto;」を記述します。ページ全体の背景色(background)や幅(width)・高さ(height)をCSSで決めています。一番外側のdivタグのid属性としてIDセレクタ名("center")を指定します。IDセレクターで指定した幅を維持しながらブラウザーの幅に応じて自動的にdivタグの領域が中央寄せになります。 対して