HOME > Tips > CSS > 「float」させたリストをセンタリングする

「float」させたリストをセンタリングする

  • Author:920

ページを分割した際のナビゲーションなど、リストアイテムを「float:left」させた場合、「text-align:center」が使えなくなってしまいます。

「display: inline-block」を使う方法など、対処方法はいくつかあるようですが、「position」を使って解決する方法を紹介します。

次のような考え方です。

  1. リストの外側のボックスにポジション「relative」を指定して、基準とする
  2. リスト全体(ul)を右に50%移動する(position: relative)
  3. 項目(li)を左に50%移動する(position: relative)

詳細はサンプルを用意しましたのでご参照ください。

サンプル

UP