float 된 요소의 중앙 정렬

펑펑 떠버리면 좌우로 들러붙어 버리니 중앙정렬 어렵다.

좌우 float 으로 띄운 div 객체를 중앙 정렬할 경우

고정 넓이를 잡아주면 쉽게 부모 div 에서 text-align: center; 주면 끝이지만.

고정 넓이를 쓰지 않는 경우 좀 귀찮아진다.

찾다보니 이런게 나오네.

position 특성을 이용한 방법같은데..

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul
{
    float: right;
    left: -50%;
    position: relative;
}
li
{
    float: left;
    left: 50%;
    position: relative;
}

쓸만은 하다.

배경이 있거나 li 에 가로 100% 배경을 깔아 쓰기엔 무리가 있다.

박스모델을 만들기 위해 overflow : hidden 을 주는 경우 짤려 버리짐.

모든곳에 통할 건아니니 적당히 알아서 써야할듯.