flaoting 된 요소는 float의 방향에 맞춰 늘러 붙어버리는데 이녀석을 가운데 정렬하는 방법입니다.
보통 가로 사이즈를 주고 가로 margin 을 auto 로 설정해서 해결 했었는데 가로 사이즈가 가변일 경우 이게 해결책이 될 수 없었죠.

지인을 통해 알게된 방법이고 지인도 구글링을 하다 알게되었다 합니다.

html

css

테스트는 http://jsfiddle.net/E2aVK/ 여기에서 가능합니다.


<ul id="bestseller">
<li>아이유</li>
<li>효느님</li>
<li>수지</li>
<li>리지</li>
<li>돼지</li>
</ul>
<style type="text/css">
#bestseller {float:right; position:relative; left:-50%;}
#bestseller li {float:left; position:relative; left:50%; border:1px solid red;}
</style>