ネットで話題のニュースを紹介

【CSS】floatで横並びさせたリスト(li)をセンタリングする方法

フッタメニューやページングナビゲーションのコーディングで、liタグをfloatさせて横並びにすることはよくあると思います。しかし、そのリスト全体をセンタリングしようと「margin:0 auto;」や「text-align:center;」を使っても上手く中央に揃いません。

コードが書かれたモニター

そんな時は「position:relative;」を使うと上手くいきますので、サンプルコードを紹介します。

横並びさせたリストをセンタリングする方法

ちょっとややこしいのですが、リスト全体のul要素を右に50%移動、各リスト項目であるli要素を左に50%移動させることによって実現させています。

HTML

CSS

「left:-50%;」は「right:50%;」と同じなので、自分がわかりやすい方で問題ありません。リスト全体をかこっている「overflow: hidden;」は、ブラウザによって横スクロールバーが出てしまう場合の対策になります。

参考サイト:floatで並べたリストのセンタリング

関連する記事

コメント

※コメントは承認制のためすぐには反映されません。