float で横並びさせてリストを中央揃え（センタリング）させる方法 - Qiita

<div class="hoge"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> ↑こんな感じのhtmlを想定します。 css position: relative; を使います。 大枠の要素(別にdivでもpでも他でも大丈夫)から指定していきます。 .hoge { position: relative; overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */ } .hoge ul { position: relative; left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */ float: left; } .ho