css 질문드립니다!

css 질문드립니다!

QA

css 질문드립니다!

답변 2

본문

33487353_1565741834.7478.png

PC 화면으로 켰을시 메뉴들 정렬된 사진들입니다 

 

메뉴들이 딱 가운데로 정렬 할수는없을까요 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

#gnb{position:relative;float:right;display:block}
#gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap{margin:0 auto;position:relative}
#gnb #gnb_1dul {}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli{float:left;width:110px;line-height:40px;padding:0 5px;position:relative;}
.gnb_1da {display:block;font-weight:bold;text-overflow: ellipsis;overflow: hidden; white-space: nowrap;font-size:1.154em}

.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em;color:#fff}
.gnb_wrap .gnb_empty a{color:#fff;text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a{color:#555}


#gnb .gnb_mnal{padding:0}

#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_all li{text-overflow: ellipsis;overflow: hidden; white-space: nowrap;}
#gnb_all a {color:#848484}
#gnb_all a:hover{font-weight:bold;color:#0060ff}

@media (min-width: 970px){
    .gnb_menu_btn{display:none}
    #gnb_all{display:none;position:absolute;top:80px;left:0;width:100%;clear:both;border-top:1px solid #eff0f3;padding:30px 0;padding-left:170px;background:#fff;z-index:100;
    -webkit-box-shadow: 0 15px 15px -14px  rgba(0,0,0,0.1);
    -moz-box-shadow: 0 15px 15px -14px rgba(0,0,0,0.1);
    box-shadow:  0 15px 15px -14px  rgba(0,0,0,0.1);}
    .gnb_close_btn{display:none;}
    #gnb_all .gnb_al_li{float:left;width:110px;padding:0 5px;line-height:30px;}
    .fixed #gnb_all{top:60px}
    #gnb_all .gnb_al_a{display:none}
    #tnb {float:right}
    .menu_toggle{display:none}
    .m_menu{display:none !important}
}

@media (max-width: 969px){
    #hd_wrapper{padding:10px;height:60px}
    #logo{float:none;width:100%;text-align:center}
    .gnb_menu_btn{position:absolute;top:0;left:0;width:60px;height:60px;background:none;border:0}
    #sch_op{position:absolute;top:0;right:0;width:60px;height:60px}
    .m_menu{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:9999}
    #tnb {padding:10px;
     -webkit-box-shadow:  0 0 14px  rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 14px  rgba(0,0,0,0.1);
    box-shadow:  0 0 14px  rgba(0,0,0,0.1);
    }
    #tnb li{margin-top:0}
    .gnb_close_btn{position:absolute;top:0;right:0;border:0;background:none;width:50px;height:50px;;font-size:20px;color:#aaa}
    .gnb_close_btn:hover{color:#666}
    #gnb_all li{position:relative;}
    #gnb_all li a{line-height:50px;border-bottom:1px solid #eee;font-size:1.154em;display:block;padding:0 10px;color:#000;font-weight:normal}
    .gnb_al_li ul{display:none}
    #gnb_all .gnb_al_li ul a{padding:0 20px;background:#fefefe}
    .menu_toggle{position:absolute;top:0;right:0;width:50px;height:50px;border:0;background:none}
    .pc_menu{display:none}

}

 

메뉴 CSS입니다 뭐가 잘못되었는지 짚어주시면 감사하겠습니다.

이 질문에 댓글 쓰기 :

답변 2

#gnb #gnb_1dul {}

#gnb .gnb_1dli{float:left;width:110px;line-height:40px;padding:0 5px;position:relative;}

 

위 두 부분을 이렇게 바꿔보세요.

 

* text-align:center; 추가

#gnb #gnb_1dul {text-align:center;}

 

* float:left; 를 display: inline-block; 으로 변경
#gnb .gnb_1dli{display: inline-block;width:110px;line-height:40px;padding:0 5px;position:relative;}

 

 

힌트를 드리자면,

인라인 요소는 부묘요소에 text-align:center; 이용해 중앙정렬 시키고,

블럭요소는 해당 요소에  width:OOpx; margin:0 auto; 넣어서 중앙정렬 시킵니다.

https://homzzang.com/b/html-103

 

조절하고자 하는 요소는 아래 좌표 참고해 찾으세요.

https://homzzang.com/b/css-251

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 61,334
© SIRSOFT
현재 페이지 제일 처음으로