css 질문드립니다!
본문
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
조절하고자 하는 요소는 아래 좌표 참고해 찾으세요.