테스트 사이트 - 개발 중인 베타 버전입니다

메인 가운데 정렬이요...

· 12년 전 · 1496 · 2
제목 없음.png
저기 사진처럼 파란색 안에있는 메인을( 화면 왼쪽에 붙어있어 왼쪽 여백이없음...) 중앙으로 (왼쪾 오른쪽 여백 있게) 만들려고 하는데 css 잘 알지 못해서 이렇게 올립니다^^




css 입니다





@import url("./default.css");

/* Layout */
body { font-size:9pt; color: #787878; font-family:"돋음" ; text-decoration: none; line-height:155%;}
#Header {width:100%; padding:0; text-align:left;}
#Container {margin:0 auto; width:2048px; padding:15px 0 0 0; overflow:hidden; }
.position_l {float:left; width:240px;}
.position_m {float:left; width:728px; margin:0 20px 0 20px; _margin:0 8px 0 16px;}
.position_r {float:left; width:240px;}
.content {float:left; margin:0 0 0 20px; width:730px;}
#Footer {width:2040px; margin:0 auto; padding:0; overflow:hidden;}


.top {width:2048px; margin:40px auto 18px ; overflow:hidden;}
.top h1 {float:left; margin:0 18px 0 12px;}
.search {float:left; vertical-align:middle; margin:7px 18px 0 0;}
.search input {vertical-align:middle;}
.search input.w100 {width:100px; height:18px; background:#ffffff; border:1px solid #d6d6d6; padding:0 0 0 3px; margin:0 2px 0 0;}

.tm {float:left; margin:8px 0 0 0;}
.tm li {display:inline; border-right:1px solid #d6d6d6; margin:0 4px 0 0; padding:0 8px 0 0; .padding:0 6px 0 0; .margin:0 8px 0 0; letter-spacing: -1pt;}
.tm li.lst {border:none;}


.tmenu_bg{margin:0 auto 5px; width:100%; background:#121212; padding:5px 0 5px 0; height:28px;}
.tmenu {margin:0 auto; width:2048px;}
.tmenu ul {}
.tmenu li {float:left; color:#e6e6e6; letter-spacing:-0.5pt; font-weight:bold; margin:5px 15px 5px 15px; position:relative;}
.tmenu li em {color:#ffffff;}
.tmenu li em.ov {background:#6EAA0F; padding:3px 5px 3px 5px;}
.tmenu li li{color:#313131; display:inline;}
.tmenu li div {position:absolute; top:32px; left:-15px; z-index:10; width:900px; display:none;}
.tmenu_s_bg {width:100%; border-bottom:1px dashed #d6d6d6; overflow:hidden; height:30px;}



.outlogin_in {border:1px solid #d6d6d6; background:#F4F4F4; position:relative; font-size:8pt;}
.outlogin_in h2 {margin:15px 0 10px 20px; .margin:15px 0 7px 20px;}
.outlogin_in span {display:block; margin:0 0 5px 20px;}
.outlogin_in span.btns {position:absolute; top:42px; right:18px;}
.outlogin_in input.w100 {width:110px; background:#ffffff; border:1px solid #d6d6d6; padding:2px 0 2px 3px; letter-spacing: -0.5pt; font-size:9pt;}
.outlogin_in p {text-align:center; margin:12px 0 12px 0; font-size:8pt; font-family:"dotum";}

.outlogin_out {border:1px solid #d6d6d6; background:#F4F4F4; position:relative;}
.outlogin_out h2 {margin:15px 0 10px 20px; vertical-align:bottom;}
.outlogin_out span.adm {position:absolute; top:16px; left:92px;}
.outlogin_out span.mbtt{display:block; margin:5px 0 0 20px;}
.outlogin_out span.btns {position:absolute; top:32px; right:18px;}
.outlogin_out ul{margin:10px 0 0 0; height:32px; border-top:1px solid #d6d6d6; padding:5px 0 5px 0;}
.outlogin_out li{float:left; height:32px; line-height:32px; margin:0 11px 0 11px; _margin:0 9px 0 9px;}
.outlogin_out li a {display:inline-block; width:31px; height:32px;}
.outlogin_out li a em {display:block; text-indent:-5000px; font-size:0;}
.outlogin_out li.myscrap {background:url(../images/member/ic_scrap.gif) 0 0 no-repeat; width:31px; height:32px;}
.outlogin_out li.mypoint{background:url(../images/member/ic_point.gif) 0 0 no-repeat; width:31px; height:32px;}
.outlogin_out li.mymemo {background:url(../images/member/ic_memo.gif) 0 0 no-repeat; width:31px; height:32px;}
.outlogin_out li.myinfo{background:url(../images/member/ic_modify.gif) 0 0 no-repeat; width:31px; height:32px;}


.la_basic {margin:7px 0 0 0; border:1px solid #d6d6d6;}
.la_basic h3{color:#313131; margin:7px 0 5px 10px;}
.la_basic ul{margin:0 10px 10px 10px;}
.la_basic li{margin:2px 0 2px 0; letter-spacing: -0.5pt;}

.la_basic2 {margin:7px 0 0 0; border:1px solid #d6d6d6;}
.la_basic2 h3{color:#313131; border-bottom:1px solid #d6d6d6; padding:5px 0 5px 10px;}
.la_basic2 ul{margin:7px 5px 10px 5px;}
.la_basic2 li{margin:2px 0 2px 5px; letter-spacing:0;}

.la_basic3 {margin:7px 0 0 0; border:1px solid #d6d6d6;}
.la_basic3 h3{color:#313131; border-bottom:1px solid #d6d6d6; padding:5px 0 5px 10px;}
.la_basic3 ul{margin:7px 5px 10px 5px; _margin:7px 3px 0 5px;}
.la_basic3 li{margin:6px 0 6px 5px; letter-spacing: -0.5pt; line-height:140%; _margin:0 0 0 5px;}
.la_basic3 span {display:block; color:#808080; font-size:8pt; letter-spacing:0; }

.la_basic4 {color:#313131; margin:10px 0 5px 0; border:1px solid #d6d6d6; background:#F4F4F4; position:relative;}
.la_basic4 h3{margin:15px 0 10px 17px; color:#373737;}
.la_basic4 p {position:absolute; top:18px; right:0; background:url(../images/common/more.png) 0 0 no-repeat; padding:0 0 0 20px; width:30px; height:10px;}
.la_basic4 ul{margin:0 0 15px 13px;}
.la_basic4 li{margin:6px 0 2px 5px; color:#505050; letter-spacing: -0.5pt; line-height:140%;}
.la_basic4 span {display:block; color:#808080; font-size:8pt; letter-spacing:0;}


.la_menu {border:1px solid #d6d6d6; background:#F4F4F4; margin:10px 0 0 0;}
.la_menu h3{background:url(../images/common/h3.gif) 10px 3px no-repeat; padding:0 0 7px 24px; margin:10px 0 0 0; border-bottom:1px solid #d6d6d6; color:#121212;}
.la_menu ul {margin:10px 0 10px 0;}
.la_menu li {margin:5px 0 5px 12px; color:#505050; letter-spacing: -0.5pt; line-height:145%;}
.la_menu a:hover {color:#121212; font-weight:bold;}


.visit {margin:7px 0 0 0; border:1px solid #d6d6d6; padding:7px 10px 7px 10px; }
.visit ul {}
.visit li {background:url(../images/common/dot.gif) 0 3px no-repeat; padding:0 0 0 12px; margin:2px 0 2px 0; letter-spacing:-0.5pt; line-height:145%;}
.visit li em {font-weight:bold;}


.st {border:5px solid #747474; padding:15px 15px 15px 18px; background:url(../images/common/st_bg.gif) right 50% no-repeat;}
.st h4 {margin:0 0 7px 0;}
.st span {font-size:9pt; letter-spacing:-0.5pt; line-height:140%;}

.navi {margin:15px 0 0 5px; color:#999999;}
.navi em {font-weight:bold; color:#313131; }

.board {margin:20px 0 0 0;}

.ad_c {}

.la_news {margin:12px 0 0 0;}
.la_news h3 {font-size:12pt; font-weight:bold; color:#313131; margin:0; letter-spacing:-1pt;}
.la_news p {color:#999999; font-size:9pt; line-height:145%; margin:7px 0 0 0;}
.la_news ul {margin:7px 0 0 0;}
.la_news li {text-align:right; padding:1px 11px 1px 2px; color:#9A9A9A; letter-spacing:0pt;}
.la_news span {float:left; color:#747474; }


.la_tab {margin:17px 0 0 0;}
.tab {border-bottom:1px solid #d6d6d6; overflow:hidden; margin:0; zoom:1;}
.tab li {float:left; margin:0 3px 0 2px; background:#686868; width:100px; text-align:center; padding:4px 0 4px 0; _margin:0 2px 0 1px;}
.tab li.ov {background:#000000; color:#ffffff; font-weight:bold;}

.tab_m {clear:both; margin:8px 0 0 0;}
.tab_m ul {margin:8px 0 0 0;}
.tab_m li {text-align:right; color:#9A9A9A; margin:3px 10px 3px 0; letter-spacing:0;}
.tab_m li span {float:left; color:#787878; margin:0 0 0 2px;}


.la_psd {float:left; margin:17px 0 0 0;}
.la_psd h3 {color:#313131; background:url(../images/common/ar.gif) 0 3px no-repeat; padding:0 0 0 13px; margin:0 0 5px 0;}
.la_psd h3 em {font-weight:normal; letter-spacing:-0.5pt;}
.la_psd dl {clear:both; margin:0 0 10px 0;}
.la_psd dt {float:left;}
.la_psd dt img {border:1px solid #d6d6d6;}
.la_psd img {display:block; margin:0 7px 0 0; }
.la_psd dd {color:#787878; letter-spacing:-1pt; line-height:140%; padding:3px 7px 0 7px;}
.la_psd dd.tt {margin:0 0 5px 0;}


.la_photo {float:left; margin:17px 0 0 0; width:420px;}
.la_photo h3 {border-top:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; padding:5px 0 5px 3px;}
.la_photo ul {margin:10px 5px 0 5px;}
.la_photo li {float:left; margin:0 7px 0 7px; text-align:center;}
.la_photo span {display:block; margin:2px 0 0 0;}


.ad_r {}

.food {float:left; margin:15px 0 0 0;}
.food h3 {color:#313131; background:url(../images/common/ic.gif) 0 2px no-repeat; padding:0 0 0 18px;}
.food dl {clear:both; width:210px; margin:7px 0 7px 3px; overflow:hidden;}
.food dt {float:left; width:90px;}
.food dd {float:left; width:120px; margin:5px 0 0 0;}
.food dd.txt {font-size:9pt; letter-spacing: -1pt; color:#959595; line-height:140%;}

.site {width:220px; float:left; margin:10px 0 0 0;}
.site h3 {color:#313131; background:url(../images/common/ic.gif) 0 2px no-repeat; padding:0 0 0 18px;}
.site ul {width:220px; margin:0 0 10px 0;}
.site li {float:left; margin:5px 3px 5px 3px; font-size:9pt; letter-spacing: -1pt; text-align:center;}
.site li img {display:block; margin:0 0 3px 0;}

.event {margin:10px 0 0 0;}
.event span {display:block; margin:0 0 5px 0;}


.search_box {border:1px solid #d6d6d6; background:#F6F6F6; padding:25px 0 25px 0; text-align:center; margin:10px 0 30px 0;}
.search_box select{vertical-align:middle;}
.search_box input {vertical-align:middle; font-size:9pt; font-family:"dotum"; border:1px solid #d6d6d6; height:17px; padding:1px 0 0 2px;}
.search_box em {vertical-align:middle;}
.search_box input.w200 {width:150px;}
.search_box input.bgno {background:none; border:none;}

.search_list {margin:0 10px 0 10px;}
.search_list h3{background:url(../images/common/ar_b.gif) 0 2px no-repeat; color:#000000; padding:0 0 0 14px;}
.search_list ul {margin:10px 0 25px 10px;}
.search_list li {background:url(../images/common/dot.gif) 0 1px no-repeat; padding:0 0 0 13px;}
.search_list h4 {background:url(../images/common/ar_2.gif) 0 2px no-repeat; padding:0 0 0 10px; font-weight:bold; color:#000000; margin:0 0 3px 0;}
.search_list dl{margin:0 0 20px 10px; overflow:hidden;}
.search_list dt{margin:0 0 5px 0; font-size:9pt; font-family:"dotum"; line-height:155%:}
/*.search_list span{text-decoration:underline; } */
.search_list dd{margin:0 0 2px 0; line-height:155%;}
.ttxt {color:#898989; line-height:120%; font-size:8pt; font-family:"dotum";}
.ttdate {color:#b9b9b9; font-size:8pt; font-family:"dotum";}
.tt_8_gr{font-size:8pt; font-family:"dotum"; color:#787878; font-weight:normal; letter-spacing:0pt;}
.tt_8_g {color:#276347;}
.tt_b {color:#000000; font-weight:bold;}


.bottom {border-top:1px dashed #d6d6d6; margin:13px 0 10px 0;}
.bottom h2 {margin:30px 40px 20px 40px; float:left;}
.bottom ul {margin:20px 0 10px 0; overflow:hidden;}
.bottom li {float:left; margin:0 5px 0 5px;}
.bottom span {display:inline-block; font-style:normal; font-size:8pt; font-family:"dotum"; letter-spacing:-0.5pt; margin:0 0 0 4px;}


.tt_b {color:#000000;}
.tt_r {color:#F52061;}
.tt_g {color:#6EAA0F;}
.tt_gb {color:#217655;}
.tt_r_b {color:#F52061; font-weight:bold;}
.tt_w {color:#f5f5f5;}
.ttb {font-weight:bold;}

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

12년 전
#wrap {width:넓이px;margin:0 auto;}

<div id ="wrap"> 로 전체를 감싸시고 스타일에 위에 처럼 줘보세요
12년 전
[code]
#wrap {
width:100%;
text-align:center;
}

#Header {
margin:0 auto;
width:원하는 크기px;
text-align:left;
}
<div id="wrap">
모든내용을 이사이에 넣어버리세요
</div>
[/code]
이런식으로 header content footer등을 margin과 width를 넣어보셔요

게시글 목록

번호 제목
284508
284499
284492
284490
284484
284481
284478
284476
284474
284472
284470
284458
284457
284454
284453
284447
284446
284444
284441
284440