floatリストのセンタリング

カニャコ

8年前

ヘッダーメニューやページャーを作るたびに「ぬあー！？」となっていたもののひとつ。
「floatで左寄せしたリストを真ん中にしたい」問題。

「それだ！」という方法を見つけたので書いておきます。

「text-align: center;」も
「margin: 0 auto;」も
毎回やってみちゃう。

「display」がいっぱいあったり
「zoom」て何？てのも
毎回あるある。

それらをすべてスッ飛ばす魔法のCSS。

.centered {
  position: relative;
  overflow: hidden;
}
.centered ul {
  position: relative;
  left: 50%;
  float: left;
}
.centered ul li {
  position: relative;
  left: -50%;
  float: left;
}

あとはHTMLの然るべき場所にクラスをつけるだけ・・・　ああスッキリ*＊