[html/css] float 요소 중앙정렬

by

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

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

html

<ul id="test">
    <li>아이유</li>
    <li>효느님</li>
    <li>수지</li>
    <li>리지</li>
    <li>돼지</li>
</ul>

css

#test {
    float: right;
    position: relative;
    left: -50%;
}
#test li {
    float: left;
    position: relative;
    left: 50%;
    border: 1px solid red;
}

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

12 thoughts on “[html/css] float 요소 중앙정렬”

Comments are closed.