floatで横並びにしたリストタグ（li）を中央揃えにする

フッターやページネーションで＜li＞タグをfloatすると、｢margin:0 auto｣や｢text-align:center｣など通常の方法ではセンタリングが効きません。

そこで、position:relativeを使って親要素の＜ul＞との位置を調節してセンタリングする方法を使えば、綺麗に横並びリストを中央揃えに出来ます

サンプル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 {
   position:relative;
   left:50%;
   float:left;
}

div#menu li {
   position:relative;
   left:-50%;
   float:left;
}