floatで横並びにした要素を中央寄せする

floatで横並びにした要素を中央寄せする

floatで横並びにした要素を中央寄せする方法を調べたのでメモ。

まずは中央寄せしてないとどうなるのかのサンプル。

  • リスト1
  • リスト2
  • リスト3
.container {
border: 1px solid #ccc;
padding: 10px;
}
.container li {
float: left;
background: #eee;
margin: 0 10px;
}
  • リスト1
  • リスト2
  • リスト3

こんな感じで端っこに寄ってしまいます。

text-align:center;は使えないし、margin: 0 auto;は幅が決まっていないと使えません。
そこで以下のCSSを追加します。

.container {
position: relative;
overflow: hidden;
}

.container ul {
position: relative;
left: 50%;
float: left;
}

.container li {
position: relative;
left: -50%;
float: left;
}
  • リスト1
  • リスト2
  • リスト3

中央寄せすることができました。

参考サイト

cssのfloat横並びリストの左右中央揃えいろいろ - emuramemo

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事