floatかけて一列に並べると、それを枠の中央に置きたい時って時々ありますよね？（ブログのページをめくるときのナビゲーションとか）
そんなときは、最近私的にはやりの ”position” と ”ネガティブマージン” ですっきり解決です。
下記のようなリストで作ったナビゲーションがあったとします。
<ul class="pageNavi"> <li>Page-1-</li> <li>Page-2-</li> <li>Page-3-</li> <li>Page-4-</li> </ul>
CSSにこれを付け加えちゃいましょう。
.pageNavi{
position:relative;
overflow:hidden;
}
.pageNavi ul{
position: relative;
left: 50%;
float: left;
}
.pageNavi ul li {
position: relative;
left: -50%;
float: left;
}
pageNaviのクラスにpositionかけておくのはIE6対策らしいです。
これですっきり、中央配置！！
————————- 09/11/18 追記 ————————-
上記の方法ではまったくうまくいきませんね・・・がせっぽくなってすみません。
IEでもうまくいく方法を追記させてもらいます。
<div class="pageNavi"> <ul> <li>Page-1-</li> <li>Page-2-</li> <li>Page-3-</li> <li>Page-4-</li> </ul> </div>
CSSはこうです。
.pageNavi{
position:relative;
overflow:hidden;
width:100%;
}
.pageNavi ul{
position: relative;
left: 50%;
float: left;
}
.pageNavi ul li {
position: relative;
right:50%;
float: left;
}
ulタグをdivで囲って、その囲ったものに対して各々position指定です。
囲った本体（上記サンプルではクラスの【pageNavi】）にはwidthの100%を指定しておいて、左と右で相殺させます。
別途ulなどには装飾を施してくださいね。
上の方法は業務で使いましたので、大丈夫のはず・・・・です・・・・
タグ:Coding, CSS, CSS, list, Tips
