floatで並べたリストをセンター寄せにするCSS

CSS

このやり方を知らなかったので備忘録です。floatで並べたリストをセンター寄せにするCSS。

HTMLコード

<div class="list">
<ul>
<li><a href="#">リスト1</a></li>
<li><a href="#">リスト2リスト2</a></li>
<li><a href="#">リスト3リスト3リスト3</li>
<li><a href="#">リスト4</li>
<li><a href="#">リスト5</li>
</ul>
</div>

CSSコード

.list {
margin: 10px 0;
position: relative;
overflow: hidden;
}

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

.list li {
margin: 0 5px;
float: left;
position: relative;
left: -50%;
list-style-type: none;
}

サンプル

実際にコードを使用したサンプルページは以下から。IE7以下で表示が変だったのと、 SNSボタン設置を試してみたので、少し上記とCSSが違います。

floatするとセンター寄せにしたい時は全体の横幅を決めて、margin: auto;するしかなかったと思うのですが、こういうやり方もあるのだと知りました。

参照サイト