フロートしたナビを中央揃えする方法

ナビゲーションをliで作成して、floatを使用して横並びにする方法はよく使用されます。
面倒なのは横並びのliを中央に揃えることです。

liをfloatして横並びにした例
htmlコード

<nav class="global">
    <ul>
        <li>AAAAAAAAAA</li>
        <li>BBBBB</li>
        <li>CCCCCCCC</li>
        <li>DD</li>
    </ul>
</nav>

cssコード

*{
  list-style: none;
  margin:0;
  padding:0;
}

.global {
	background-color:#ccc;
	overflow: hidden;
}
.global ul {
    float: left;
}
.global li {
    float: left;
	background-color:#F0F8A2;
	border:1px solid #888;
}

中央揃えする方法

floatしたliを中央揃えにするにはulとliにposition:relativeを設定して、ulの座標をleft:50%とし、liの座標をleft:-50%とします。
Tipsとして知っておくと便利です。

liをfloatして横並びにした後に中央揃えの例
htmlコード

<nav class="global">
    <ul>
        <li>AAAAAAAAAA</li>
        <li>BBBBB</li>
        <li>CCCCCCCC</li>
        <li>DD</li>
    </ul>
</nav>

cssコード

*{
  list-style: none;
  margin:0;
  padding:0;
}

.global {
    overflow: hidden;
    position: relative;
	background-color:#ccc;
}
.global ul {
    float: left;
    position: relative;
    left: 50%;
}
.global li {
    float: left;
    position: relative;
    left: -50%;
	background-color:#F0F8A2;
	border:1px solid #888;
}