★゜・。。・゜゜・。。・゜☆ 2011年06月01日 ☆゜・。。・゜゜・。。・゜★
【html/css】liをfloat:leftしたcomponentを中央に配置した際の些細なメモ
分かってしまえばコロンブスの卵的なことでしたが、意外と悩んだのでメモ。
- floatで並べたリストを中央揃えする – CSSデザインノート
- floatで並べたリストのセンタリング – Weblog – hail2u.net
- CSSでfloatした要素群を中央揃えにする | OMIMO.net
などにもあるように、liをfloat:leftで横に並べたページ・ナヴィを中央に配置するには、例えば
ulをその親要素（例えばdiv）の50%分右に移動し、liをその親要素(ul)の50%分左に移動すればOK。
ということで、下のようなソースがよくある手法ですが
css↓
.pageNavi {
position:relative;
overflow:hidden;
}
.pageNavi ul{
position: relative;
left: 50%;
}
.pageNavi ul li {
position: relative;
left:-50%;
float: left;
list-style:none;
margin:1em;
}
html↓
<div class="pageNavi"> <ul> <li><a href="#">【PAGE1】</a></li> <li><a href="#">【PAGE2】</a></li> <li><a href="#">【PAGE3】</a></li> <li><a href="#">【PAGE4】</a></li> </ul> </div>
実際にやってみると、このように
どうも右にずれてしまう、、、。
ので、おかしいな～、なんでだろ～、と背景に色を塗るなどして調べていたら気づきました。
ulのmargin, padding分がずれの原因
でした。
そこでulに「margin:0;」「padding:0;」を追加
.pageNavi ul{
position: relative;
left: 50%;
margin:0;
padding:0;
}
したらこのようになりました。
ちなみに、
ulを囲っているdivに「position:relative;」を入れているのはIE対策、
「overflow:hidden;」を入れているのはulを右にずらした際に横幅が広がって横スクロールバーが出現してしまうのを防ぐため。