공부/HTML|CSS
Float된 요소 가운데정렬 시키기
밥성수
2013. 5. 21. 13:14
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>