リストをフロートで並べた際のセンタリングの仕方

グローバルナビゲーションなどで、リストを中央揃えで表示したいとき、text-align　などでセンタリングしても、中央ぞろえにならないと思います。

しかし、簡単なコードで実現できるのでここで紹介します。

.navigation {
position: relative;
overflow: hidden;
}

.navigation ul{
float:left;
left:50%;
position:relative;
}

.navigation li{
float:left;
left:-50%;
position:relative;
}

これだけです。

ビジュアルを定義させる細かい部分は、ご自身のデザインにあわせていただければいいので、省いてあります。

表示するli の幅が固定の場合は、　margin:0 auto;　で中央揃えにすることが可能です。