gooodmark

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

516bookmark

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