메인메뉴 가운데 정렬
본문
https://sir.kr/g5_skin/14365?sfl=wr_subject%7C%7Cwr_content&stx=%EB%A9%94%EB%89%B4&page=3
위의 펼침 메뉴 스킨 을 가지고 아래처럼 수정하였습니다.
메뉴를 왼쪽정렬이 아니고 가운데로 오게 하고 싶은데..
제 지식이 부족해서 이리저리 해봐도 안되네요 ㅠㅠㅠ
아래 위 사진대로 수정한 코드 남겨 드립니다.
어디를 어떻게 바꾸면 메뉴가 가운데로 오게 될까요???
/* 공통 */
* {box-sizing: border-box;}
body {font-size:14px; font-family: "나눔고딕", "NanumGothic", "Malgun Gothic", "Gulim", "dotum" !important;}
a, a:hover, a:link, a:active {text-decoration: none; color: inherit;}
ul,li {list-style: none;margin: 0;padding: 0;}
#container {z-index:auto;}
.wrap {position: relative; width: 100%; margin: 0; box-sizing: border-box; }
/* 메뉴 */
.menu {font-size:17px;margin: 0 auto ; font-family: "나눔고딕", "NanumGothic", "Malgun Gothic", "Gulim", "dotum" !important;background: linear-gradient(-135deg, #1900d7, #00acd4) fixed;clear: both;border-top:1.5px solid #64FFE4;}
.menu * {box-sizing: border-box;}
.menu .wrap {position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; }
.menu ul,.menu li {list-style: none;margin: 0;padding: 0px;}
.menu a,.menu a:hover,.menu a:link,.menu a:active {text-decoration: none; color: inherit;}
.lnb {position: relative;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#193968', endColorstr='#00acd4')";}
.lnb .lnb_depth1{width: 100%;}
.lnb .lnb_depth1 >li{display: inline-block;width: 12.4%;text-align: center;border-right:1px solid #64FFE4;border-left:1px solid #64FFE4}
.lnb .lnb_depth1 >li a{padding: 15px 0;display: inline-block;color: #fff;font-weight: 600;font-size: 1.1em;}
.lnb .lnb_depth1 >li a:hover {color: #f2e9d6;}
.lnb .lnb_depth2 {display:none;position: absolute;top:54px;z-index:100;left: 0;width: 100%;background: #fff;border-bottom: 1px solid #ddd;font-size: 1em;}
.lnb:hover .lnb_depth2{display: block;}
.lnb .lnb_depth2 .wrap >ul {display: block;height: 306px;}
.lnb .lnb_depth2 .wrap >ul >li {display: inline-block;text-align: center;width: 12.4%;line-height: 2em;border-left: 1px dotted #ddd;padding:0;box-sizing: border-box;-ms-filter: "box-sizing:border-box";float: left;height: 100%}
.lnb .lnb_depth2 .wrap >ul >li:first-child {border-left:0;}
.lnb .lnb_depth2 .wrap >ul >li:nth-of-type(even) {background: #f0f0f0;}
.lnb .lnb_depth2 .wrap >ul >li ul li a {padding: 3px 0;display: block;box-sizing: border-box;-ms-filter: "box-sizing:border-box";}
.lnb .lnb_depth2 .wrap >ul >li a:hover {background: #0b7aa5;color: #fff;}
답변 5
menu.extend.css 파일 18번 라인
.lnb .lnb_depth1{width: 100%;text-align: center;} 으로 수정 하세요
답변 감사합니다.. 위와 같이 하니.. 메뉴 부분이 가운데로 오는데요
마우스 오버시 아래 펼쳐지는 메뉴는 왼쪽으로 나오네요...
펼쳐지는 서브 메뉴도 가운데로오게 해주세요..
22번 줄에 text-align: center;를 추가 해도 안되네요.
현재 작업중인 url을 올려보세요.. 그러면 도움받기가 훨씬 쉬워집니다.
전체 메뉴를 감싸는 엘리먼트에
margin:0 auto
를 줘보세요.
http://sun76843.dothome.co.kr/
현재 작업중인 곳입니다.
원하는 게 맞는지 모르겠네요...
menu.extend.css 18라인을 아래와 같이 해보세요..
.lnb .lnb_depth1 {
- width: 1200px;
- margin: 0 auto;
}
알려주신대로 하면 안되네요 ㅠㅠㅠ
저 같은 경우엔 보통 이런 식으로 문제를 찾아요.
현재, 아마도 정확한 레이아웃이 파악 안 된 상태에서 작업하려니까 헤메고 계시는 것 같네요.
HTML 요소들에게 style="border:10px solid red;" 줘서 어떤 요소가 어떤 레이아웃 영역을 갖는지 파악 후 작업합니다.
가운데 정렬법은 간단하니까요.
블럭요소는
부모 요소에 100% 주고, 해당 요소에 width값 (100% 주면 안 됨) 주고 margin: 0 auto 주면 되고,
인라인 요소는
부묘 요소에 text-align:center 주면 돼요.
알려주신대로 해봣는데.. 제가 멀 잘못한건지..
여기저기에 몽땅 붙여봐도.. 변화가 없네요 ㅠㅠㅠ
어떤 객체가 어떤 객체를 감싸고 있는지, 즉 부모 자식의 관계를 파악하는게 우선이라 생각됩니다 !
부모 요소의 width는 100%로 꽉 채워주고 text-align: center; 까지 지정해주고,
자식 요소에는 margin: 0 auto; 를 줘보시는 것도 하나의 방법입니다 !
답변감사합니다..
알려주시는 대로 해보고 있는데.. 왜 안먹히는지 잘 모르겟네요.
이리저리 해봐도. 위치는 고정이 된듯 안움직이네요 ㅠㅠㅠ
