ブラウザを拡大縮小したときに、左上が常に基準点としておかれ、2つ幅の違う枠組みを作った時に、整形がずれるってことがあります。そんな中で常に中央にし、拡大や縮小したとき、ディスプレイの解像度がかわったときにでも中央揃えする方法をまとめていきたいと思います。6月11日記事
目次
上側は1000px下側は1600pxの幅のボックスを並べたいとします。こんな感じ
しかし、拡大すると、
下側1600pxが上のボックスの基準点に合わせようとずれてしまいます。
そうではなく、このようではなく以下のようにしたいのです。
のようにしたいのです。
HTMLは共通でいいです。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>常に中央揃え</title> </head> <body> <header></header> <div id="wrapper"></div> </body> </html>
通常の記述
header{
width: 1000px;/*headerにwidthやheightを記入するのはあまり好ましくないですがご了承ください。*/
height: 400px;
background: #F00;
margin: 0 auto;
}
#wrapper{
width:1600px;
height: 1200px;
background: #0F0;
margin:0 auto;
background: url(1600.png);
}
この方法だと、 拡大縮小や解像度が小さいときに下側wrapperがずれます。
基準点を常に中央に設定させるためにbodyタグに、position:absoluteを指定し、最大の長さの半分のピクセル単位を測ります。そして、左側マージンをとってマイナスをつけるようにします。
body{
position:absolute;
left: 50%;
margin-left: -800px; /*1600の半分*/
width: 1600px;
background: #e3e3e3;
}
header{
width: 1000px;/*headerにwidthやheightを記入するのはあまり好ましくないですがご了承ください。*/
height: 400px;
background: #F00;
margin: 0 auto;
}
#wrapper{
width:1600px;
height: 1200px;
background: #0F0;
margin:0 auto;
background: url(1600.png);
}
すると拡大しても
のようになります。
