float:left 된 것을 센터 정렬 하는 방법에 관하여...??
한빛
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
meta http-equiv=Content-Type content=text/html; charset=euc-kr /
titleUntitled Document/title
style type=text/css
ul, li {margin:0; padding:0; list-style:none;}
.box {width:100%; overflow:hidden; background-color:#ccc; text-align:center;}
.box ul {display:inline-block; overflow:hidden;}
.box ul li {display:inline-block; float:left; width:50px; height:50px; margin:5px; background-color:blue; color:#fff;}
/style
/head
body
div class=box
ul
li1/li
li2/li
li3/li
li4/li
li5/li
/ul
/div
/body
/html
그림1을 보면
float:left 된 박스 또는 display:inline-block 된 박스를 위 그림처럼 좌측 정렬로 했을경우
한줄에 다 있을경우에는 5개의 박스가 센터 정렬로 되어 있지만...
아우르는 영역이 가로 100% 였을경우 사이즈가 변함에 따라 위 그림처럼 박스가 밑으로 떨어지는데요...
이 경우 inline-block 처리된 ul 이 중앙으로 오지 않고 그림1 처럼 좌측으로 붙습니다..
그림2 처럼 하나가 밑으로 떨어져도 중앙에 오도록 하는 방법을 이래저래 해봐도 잘 안되는군요...
가르침 부탁드립니다... ^^;
-
머슴밥
아웅.. 포기! ㅜㅜ
-
파라미
jagurgold 님 ul은 500px로 고정이 되면 안되구요..
사이즈가 줄어들면서
ㅁㅁㅁㅁㅁ
이것이
ㅁㅁㅁㅁ
ㅁ
이렇게 됐다가
ㅁㅁㅁ
ㅁㅁ
이렇게 됐다가
ㅁㅁ
ㅁㅁ
ㅁ
이렇게 되는데..
이 ul이 센터가 되야된다는거죠... ㅠㅠ -
솔로다
style
.box{width:100%;text-align:center;}
.box ul{margin:0 auto;width:500px;}
.box ul li{float:left;width:100px;}
/style
div class=\box\
ul
li111/li
li111/li
li111/li
li111/li
li111/li
li111/li
/ul
/div -
봉봉
안되는데요...
두줄로 떨어지는것이 중앙정렬 되는게 아니고
두줄로 떨어지는건 left정렬이 되야하고 ul 이 센터 정렬이 되야 합니다...
ㅁㅁㅁㅁ
ㅁ
이렇게 된 ul이 센터정렬 -
딥자두
.box{width:100%;text-align:center;}
.box ul li{display:inline;}
.box ul li span{display:inline-block;width:100px;}
div class=\box\
ul
lispan1/span/li
lispan1/span/li
lispan1/span/li
/ul
/div