floatしたリストのセンタリング
2014.04.04
ページネーションやバナーなど、li
をfloat
で横並びにしたものをセンタリングする。
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;
}