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拍手お返事
Comment