css 질문드립니다! 채택완료

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개

채택된 답변
+20 포인트

#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;}

 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

혹시 죄송한데 그렇게하니,로그인 오른쪽 버튼이 먹통입니다 !
로그인 오른쪽 버튼이라고 하시는건 검색(돋보기) 말씀 하시는건가요?
회원가입 로그인 돋보기 버튼 까지 먹통이 됩니다 메뉴는 가운데로 정렬되는데!
이건 홈페이지 CSS 직접 봐야 알것 같네요.
공개 어려우시면 저부분 레이아웃을 알려주셔야 할것 같아요.
CSS는 위에 올린게 전부일것 같고..
쪽지로 알려주시면 될것 같아요.
댓글에 카톡 아이디랑 휴대전화번호는 지워주세요~!

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

힌트를 드리자면,

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

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

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

 

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

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

로그인 후 평가할 수 있습니다

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

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고