모바일 웹 가운데정렬이 안되네요..ㅠㅠ
파란
첨으로 모바일웹 코딩을 시작했어요.. 나름 여기저기보고 최대한 일반적인 모바일웹 코딩작업을 한다고 했는데 뜻대로 되질않아서요 ㅠㅠ
아이콘 부분이 왼쪽으로 치우칩니다.
근데 뭐 어떤걸 해봐도 도통 중간으로 가질 않네요, margin/padding 이나 주면 겨우 중간으로 맞춰지나 싶다가도
가로화면으로 하면 그 어중간한 치우침이 ^^;
테이블로도 넣어봤다가 div를 더 넣어봤다가.. ul에 스타일을 넣어봤다가...
IE/파폭에선 되도 모바일에선 무시해주시네요.. 도와주세욜~
HTML
div id=wrap
div id=header !-- title 부분 --
div class=top
h1a href=img src=img/top_tit.gif alt=..//a/h1
div class=preva href=img src=img/btn_pr.gif alt=이전 //a/div
/div
div id=container2 !-- 내용 --
div class=mnavi
ul
lia href= class=n1발주별정보/a/li
lia href= class=n2품목별정보/a/li
lia href= class=n3미납품현황/a/li
lia href= class=n4납품현황/a/li
lia href= class=n5발주진행현황/a/li
lia href= class=n6반품정보/a/li
lia href= class=n7세금계산서br /발행/a/li
lia href= class=n8세금계산서br /발행현황/a/li
lia href= class=n9공지사항/a/li
lia href= class=n10게시판/a/li
lia href= class=n11자료실/a/li
lia href= class=n12로그아웃/a/li
/ul
/div
/div
/div
/div
CSS
#wrap{width:100%;}
#header{position:relative;}
#container2{position:relative;}
.
.
.
/* MAIN 네비게이션 */
.mnavi{float:left;}
.mnavi ul{ float:left; padding:17px 5px}
.mnavi li{ float:left; padding:0 5px;}
.mnavi li a{ position:relative; display:block; margin-bottom:6px; width:75px; height:0px; background:url(../img/common/mnavi.png) no-repeat; overflow:hidden; text-align:center; padding-top:66px; padding-bottom:26px; color:#fff; font-weight:bold; font-size:1.2em; line-height:120%}
.mnavi li p{text-align:center; margin:0px; width:60px; overflow:auto; letter-spacing:-0.1em; padding-top:60px;}
.mnavi li a.n1{ background-position:0 0;}
.mnavi li a.n2{ background-position:0 -139px;}
.mnavi li a.n3{ background-position:0 -278px}
.mnavi li a.n4{ background-position:0 -417px}
.mnavi li a.n5{ background-position:0 -556px}
.mnavi li a.n6{ background-position:0 -695px}
.mnavi li a.n7{ background-position:0 -834px}
.mnavi li a.n8{ background-position:0 -973px}
.mnavi li a.n9{ background-position:0 -1112px}
.mnavi li a.n10{ background-position:0 -1251px}
.mnavi li a.n11{ background-position:0 -1390px}
.mnavi li a.n12{ background-position:0 -1529px}
/* MAIN 네비게이션 */
-
하늬
잉... 나도 방금 해보고 display:inline-block 해보라고 쓸려구 왔는데 ...
이미 피융님이 해버리셨넹 .... -
한국녀
스마트폰인데 IE를 쓰진 않겠죠.. ㅎㅎ
-
god
display:inline-block;이 ie 6,7에서는 핵이 필요할실꺼예요-ㅎㅎ
찾아 보시면 다 나오겠지만..
제가 심심해서,,끄적입니다-ㅎㅎ
같이 사용하세요-ㅎ
zoom:1;/*ie 6,7*/
.display:inline;/*ie 6,7*/ -
스릉흔드
어머어머어머!!!!!!!! display:inline-block;이 거네요!!!아~~ 신세계에요 고맙습니다!!! 복받으실끄에요.
-
사이
li에 float:left 사용하지 마시고 display:inline-block;사용해 보세요-
-
팬지
position을 주었는데 width 값이 없내요?? 그리고 포지션은 안줘도 될거같구여
ul 을 4개로 나눠서 3개씩 묶은후에 width:100%; 주시고
ul - list-align:center; 주면 맞지 않을까 싶내요.. 나머지부분은 조금씩 수정하심될거같구용 -
우미
.mnavi{text-align:center; width:100%}
.mnavi ul{text-align:center; padding:17px 5px;}
.mnavi li{ float:left; padding:0 5px;}
요로케해도 안되용 으으으으으 ㅠㅠ -
이퓨리한은지
float:left 때문에 그런거같네요~
-
놀리기
ul 의 float:left; 을 없애고width:100%; text-align:center; 를 줘도 전~혀 바뀌지않아서..^^; 아하하..
-
갤쓰리
아이콘 리스트인 ul을 감싸고 있는 div에 text-align:center; 를 줘야 ul이 중앙정렬이 되지 않을까요 ?