【BiTT】俺のクローン作るしかなくね!?
【BiTT】俺のクローン作るしかなくね!?
2010.11.24

floatで横並びさせたリストをセンタリングするときの方法

姐さん

ページネーションなどの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