リストをフロートで並べた際のセンタリングの仕方
公開日:
最終更新日: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; で中央揃えにすることが可能です。