css 질문드립니다!

css 질문드립니다!

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

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

채택됨

Dessi님의 답변

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

 

 

주소복사
채택됨
답변의 댓글

sinbi님의 답변

힌트를 드리자면,

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

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

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

 

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

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

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 81,531 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 사이트맵 + RSS = 구글, 네이버 웹마스터도구

    참여20 회 시작19.12.13 10:44 종료19.12.16 10:44
  2. 강릉의 명물 초당/안목 커피빵

    참여32 회 시작19.12.10 11:21 종료19.12.17 11:21

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT