flaoting 된 요소는 float의 방향에 맞춰 늘러 붙어버리는데 이녀석을 가운데 정렬하는 방법입니다.
보통 가로 사이즈를 주고 가로 margin 을 auto 로 설정해서 해결 했었는데 가로 사이즈가 가변일 경우 이게 해결책이 될 수 없었죠.
지인을 통해 알게된 방법이고 지인도 구글링을 하다 알게되었다 합니다.
html
|
1 2 3 4 5 6 7 |
<ul id="test"> <li>아이유</li> <li>효느님</li> <li>수지</li> <li>리지</li> <li>돼지</li> </ul> |
css
|
1 2 3 4 5 6 7 8 9 10 11 |
#test { float: right; position: relative; left: -50%; } #test li { float: left; position: relative; left: 50%; border: 1px solid red; } |
테스트는 http://jsfiddle.net/E2aVK/ 여기에서 가능합니다.
개쩔 !
훗.
음 그 지인이 얼마전에 이븐옹을 능욕한 그 분이신가요? ㅎㅎㅎ
ㅇㅇ 맞음. 그분임 ㅋ
ㅋㅋㅋ~~!!! 그 지인분이 여기저기 뿌렸다고 기분좋아하더만~ ㅋㅋㅋ
ㅎㅎ 그 지인을 모르는 사람이 없어
님 너무 감사해요 ㅠㅠ
도움이 되셨다니 다행이예요 🙂
너무감사합니다.~ 속시원하네요~;;
감사합니다 🙂
우와 이거 원리가 뭐지…?
ㅠㅠ 정말정말 감사합니다. 한번에 해결!!