cssで position:fixedを指定すると、否応なしにtop left で指定した位置を基準に要素が配置される。
この仕様はfixedを指定した要素を中央(center)に配置したいときに不都合である。
たとえば、↓のようなものを書いたとしよう。
------------------------------------
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
body{
text-align:center;
}
div{
display:inline-block;
}
div.fixedDiv{
border:solid 1px blue;
position:fixed;
top:0px;
left:0px;
width:640px;
height:480px;
}
</style>
</head>
<body>
<div class="fixedDiv"></div>
<div style="height:2000px;"></div>
</body>
</html>
------------------------------------
body内のインライン要素はcenterに配置するようになっているが、その要素のpositionにfixedを指定すると、そうはならない。
これを改善するには、fixedの要素をwidth:100%; text-align:centerにして、その中に新たに要素を組み込む必要がある。
具体的には、先ほどのものを↓のように変更する。
------------------------------------
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
body{
text-align:center;
}
div{
display:inline-block;
}
div.fixedDiv{
position:fixed;
top:0px;
left:0px;
width:100%;
height:480px;
text-align:center;
}
div.fixedDiv_inner{
width:640px;
height:100%;
}
</style>
</head>
<body>
<div class="fixedDiv">
<div class="fixedDiv_inner">
</div>
</div>
</body>
</html>
------------------------------------