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

公開日:

最終更新日:2015/11/20

グローバルナビゲーションなどで、リストを中央揃えで表示したいとき、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; で中央揃えにすることが可能です。

 

Tags: , ,

Categorised in: