HTML 에서 float:left 가운데 정렬 하기

float: left나 float: right된 element는 중앙 정렬이 되지 않습니다. 물론 

width를 줘서 margin를 이용하면 됩니다. 하지만 매번 width를 수정하는건 레알 귀찮습니다. 

간다하게 float: right/left, position: relative 그리고 left: +-50%를 이용해서 해결 할 수 있습니다. 욕덩이 6 에서도 잘 돌아가는걸 확인했습니다. 

예) 

#test { 

    float: right; 

    position: relative; 

    left: -50%; 

} 

#test li { 

    float: left; 

    position: relative; 

    left: 50%; 

    

    border: 1px solid red; 

} 

<ul id="test"> 

    <li>아이유</li> 

    <li>효느님</li> 

    <li>수지</li> 

    <li>리지</li> 

    <li>돼지</li> 

</ul> 

구경하러가기: http://jsfiddle.net/E2aVK/