gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

724bookmark

floatしたリストのセンタリング

ページネーションやバナーなど、lifloatで横並びにしたものをセンタリングする。

html

<div id="nav">
<ul>
<li><img src="../common/img/01.png" width="200" /></li>
<li><img src="../common/img/02.png" width="200" /></li>
<li><img src="../common/img/03.png" width="200" /></li>
</ul>
</div>

css


#nav {
position: relative;
overflow: hidden;
}

#nav ul {
float: left;
left: 50%;
position: relative;
}

#nav li {
float: left;
left: -50%;
position: relative;
}

demo