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

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

회원로그인

진행중 포인트경매

  1. 스타벅스 e-Gift Card (100,000원)

    참여75 회 시작19.08.16 09:15 종료19.08.23 21:15
  2. 댓글 이미지 첨부 게시판

    참여22 회 시작19.08.14 23:33 종료19.08.21 23:33

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

© SIRSOFT