div 코딩 시 중앙정렬 질문
악당
◁ 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 ▷
이런 게시판 페이지이동 부분을 div를 이용해서 만들려고 합니다.
div를 width 값이 고정되여 있으면 작성 시 큰 문제가 안되는데..
◁ 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 ▷
◁ 11 | 12 | 3 ▷
이런 식으로 폭이 변하는 경우 아직 div가 적응기간 중이라 어려움이 있네요
100% 중간에 [div][div][div] 이런 식으로 하는 방법 알려주세요~
#pglist { width:100%; text-align:center;}
#pglist div.prov { float:left; }
#pglist div.list { float:left; }
#pglist div.next { float:left; }
div style=width:500px; text-align:center;
div id=pglist
div class=prov◁/div
div class=listspan1/span span|/span span2/span span|/span span3/span/div
div class=next▷/div
/div
/div
span 에도 class를 넣어 페이지이동 부분을 만들어 봤습니다.
왼쪽 오른쪽으로 정렬하는건 어떻게 하겠는데 중앙정렬 할때 float하면 어려움이 있어요T^T
중앙으로 하게되면 중앙으로 정렬이 안되고
왼쪽으로 붙네요 float: 속성때문에 그런건지 왜 그런지는 모르겠지만.. 페이지이동 부분 같이
중앙정렬을 하고 숫자부분이 정해진 크기가 아닌 부분을 처리할때 좋은 작업 방법이 있으면 알려주시면
정말 감사드리겠습니다. 아직 div의 쓰이는 속성들을 많이 몰라서 있는거로 어떻게 만들어 보려고 하는데
어려움이 종종 있는데.. 막히면 저런 부분은 테이블로 짜고 있지만
암튼, 좋은 답변 기다리겠습니다. ^^
-
재바우
답변 감사드립니다^^
-
샹1큼해
그리고 span은 inline 태그이기 때문에 상/하 padding이나 margin은 적용되지 않습니다.
float 선언하시면 적용 가능 하고요~ -
눈꽃
float 상에서는 중앙정렬 안됩니다~
그냥 table로 중앙정렬 하시고 그 안을 ul, li로 처리하세요~
아니면 float:left 말고 display:inline으로 작성하시면 text-align:center 적용 가능하고요.
하지만 display:inline은 IE와 타 브라우져의 랜더링 방식이 다르기 때문에
hack이 필요하게 되죠~ -
훌림목
좀더 생각해 봤는데.. 어짜피 a태그는 먹어야 하니까..(해당하는 페이지는 링크 안먹는다는 전제로)
style
#warp{
\ttext-align:center;
\tfont-size:12px;
}
#warp span, #warp a{
\tpadding-left:5px;
\tpadding-right:5px;
}
/style
div id=\warp\
\ta href=\#\◁/a
\tspan1/span|a href=\#\2/a|a href=\#\3/a| -
아더
style
#warp{
\ttext-align:center;
\tfont-size:12px;
}
#warp span{
\tpadding-left:5px;
\tpadding-right:5px;
}
/style
div id=\warp\
\tspana href=\#\◁/a/span
\tspan1/span|
\tspan2/span|
\tspan3/span|
\tspan4/span|
\tspan5/span
\tspana href=\#\▷/a/span
/div -
라임나무
spanspanspan은 가능한데요.. ◁ ▷ - 요게 이미지가 작으면 어떻게 쓰는데요.
어떤 경우에도 가능한 페이지리스트를 준비중이라..
디자이너가 크게 ◁ 를 만들경우 span에서 여백 설정하기가 개인적으로 어려움이 있네요.
span style=\margin-top:10px\◁/spanspan1 | 2 | 3 ...
인경우 margin 이 안먹히는 현상이 있는데.. 혹시 이런 부분에서 좋은 정보 있으면 알려주세요^^ -
WhiteCat
style
#pglist { width:500px; }
/style
div style=\text-align:center;\
span id=\pglist\
span class=\prov\◁/span
span class=\list\span1/span span|/span span2/span span|/span span3/span/span
span class=\next\▷/span
/span
/div
약간의 꼼수를 더해서 -ㅂ- b -
수련
style type=\text/css\
body {
margin:0;
padding:0;
}
ul {
float:left;
text-align:center;
border:1px solid #000;
width:100%;
}
ul li {
display:inline;
}
/style
ul
li class=\prov\◁/li
li1/li
li2/li
li3/li
li4/li