ページネーションなどのlistをfloatさせた要素をセンタリングするときのメモです。
ナビゲーションやページネーションなどでliタグをfloatさせて横並びにすることがよくあると思います。
しかし、センタリングしようと思っても「margin:0 auto;」も「text-align:center;」も効きませんよね？
こんなとき、「position:relative;」を使うと上手くいくようです。
コード
HTMLコード
<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
</div>
CSSコード
div#menu {
position: relative;
overflow: hidden;
}
div#menu ul {
float:left;
left:50%;
position:relative;
}
div#menu li {
float:left;
left:-50%;
position:relative;
}
リスト全体のul要素を右に50%の位置に移動。各リスト項目であるli要素を左に50％の位置に移動。
まとめ
ちょっと頭がこんがらがって来るのですが、これで上手いこと中央にもって来れました。li要素が増えてもばっちりです。
コードもシンプルなのでしばらくこれで行こうと思います。
参考サイト
floatで並べたリストのセンタリング - Hail2u.net
http://hail2u.net/blog/webdesign/centering-floated-list.html
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
