매뉴를 중간으로 옮기려면...?
관련링크
본문
맨위에 매뉴 width=1000를 100%로 바꾸었더니...
매뉴글씨들이 아래처럼 됐습니다.
양쪽에 공간을 줘서, 가운데로 오게하려면
어떻게 해야 하나요?
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:970px;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
/* 상단 레이아웃 */
#hd {z-index:4;position:absolute;top:0px;left:0;min-width:100%;width:100%}
.hd_zindex {z-index:10 !important}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_wrapper {margin:60px auto;height:55px;width:100%;zoom:1;background:#000000;position:relative;padding-left:0px}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#logo {float:left;padding:0;background:#000000;height:55px;width:150px;padding-left:0px}
#logo a{display:inline-block;vertical-align:middle;margin-top:3px}
/*상단_로그인*/
#tnb {position:Absolute;top:-30px;right:0;}
#tnb:after {display:block;visibility:hidden;clear:both;content:""}
#tnb li{float:left;border:1px solid #none;padding:3px; margin-left:3px;border-radius:3px;font-size:0.917em;background:#ffffff }
#tnb li a{color:#646464;}
#tnb li.tnb_adm{background:#BABABA;}
#tnb li.tnb_adm a{color:#000000;}
/* 메인메뉴*/
#gnb {position:relative;margin: 0;float:left}
#gnb:after {display:block;visibility:hidden;clear:both;content:""}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_1dul {padding:0;zoom:1;}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;position:relative;float:left;width:200px;text-align:center;}
a.gnb_1da {padding-right:0px;display:inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;font-weight:bold;line-height:2.95em;text-decoration:none;color:#fff;height:55px;line-height:55px;display:block;font-size:1.30em}
a.gnb_bg{background:url('../img/gnb_bg.gif') 100px 50% no-repeat; margin-left:0px;}
.gnb_bg:focus, .gnb_bg:hover {background-color:#000000 ;text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#000000;color:#fff}
답변 2
원래 너비 1000px 인 #hd_wrapper를 100%로 변경하신게 검정바가 좌우 가득차길 원해서 같은데 맞나요?
그렇다면 그냥 #hd_wrapper 를 감싸는 새로운 요소를 하나 더 추가하세요.
<div class="hd_wrapper_outer">
<div id="hd_wrapper"> ...
</div>
그래놓고 새로 추가한 hd_wrapper_outer에 배경색을 넣어주심 되겠지요.
#hd_wrapper에서 변경하신 너비값은 원래대로 돌려놓으시고 background: transparent 로 변경하시거나 삭제해주시고, 마진값으로 상하 여백을 주셨는데 이 부분은 hd_wrapper_outer가 상하 마진을 같도록 변경해주시고요.
flex의 경우는 브라우저 지원사항이 아직 갈립니다.
#hd_wrapper{
display:flex;
justify-content:center;
}
추가 하세요