매뉴를 중간으로 옮기려면...?

매뉴를 중간으로 옮기려면...?

QA

매뉴를 중간으로 옮기려면...?

본문

맨위에 매뉴 width=1000를 100%로 바꾸었더니...

매뉴글씨들이 아래처럼 됐습니다.

 

양쪽에 공간을 줘서, 가운데로 오게하려면

어떻게 해야 하나요?

 

2041068896_1519702764.2326.jpg

 

2041068896_1519702703.6209.jpg

 

 

/* 팝업레이어 */
#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;

}

 

추가 하세요

답변을 작성하시기 전에 로그인 해주세요.
전체 5

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT