묻고답하기
[css문의]왼쪽 정렬된 메뉴 중앙정렬하는 방법 문의드립니다.
2015.04.25 17:37
위와같이 로고는 중앙정렬이고 아래에 나오는 메뉴는 좌측정렬입니다.
아무리 검색해서 CSS를 수정해보아도 제 능력으로는 도저히 안되어 이렇게 도움 요청드립니다.
url은 http://test.webpyrus.gethompy.com/museeneuf/ 입니다.
아래 CSS 중 수정하면 될듯한테 고수님들의 조언 부탁드립니다.
/* Site Layout - Header */
.header{position:fixed;_position:absolute;z-index:5;width:100%;left:0;top:0;padding-bottom:2px;background:url(../img/breadclumb_t.png) repeat-x left bottom;_background:none;}
/* -- 메뉴 상단 -- */
.top_header{position:relative;background-image:url(../img/top_header.png);background-repeat:repeat-x;background-position:left bottom;}
.top_color .top_header{background-image:url(../img/top_headerB.png);}
.hidden_header{display:none;overflow:hidden;}
/* -- 우상단 로그인 -- */
.account{position:relative;z-index:1;*zoom:1;}
.account ul{ margin:0; padding:0; z-index:2;list-style:none;float:right;}
.account li{float:left;height:30px;line-height:30px;position:relative;}
.account li a{text-decoration:none;padding:0;height:30px;line-height:30px;display:inline-block;padding:0 10px;}
.account font-color:black;
/* 로고 */
.header .wrap_logo{height:100px;}
.header h1.logo{margin:0;padding:0 0 0 20px;position:relative;z-index:2;}
.header h1.logo_center{padding:0;text-align:center;}
.header h1.logo a.text_logo{color:#fff;font-size:48px;font-family:"Oswald", Arial, Helvetica, sans-serif}
.header a{text-decoration:none}
.header img{vertical-align:middle;}
.header h1 img{line-height:100px;max-height:100px;}
.header ul{list-style:none;margin:0;padding:0;zoom:1;position:relative;}
.header ul:after{content:"";display:block;clear:both}
.header a.first_a{float:left;height:60px;line-height:60px;padding:0 30px;font-size:13px;font-weight:nomal;-webkit-text-shadow:0px 0px 0 rgba(0,0,0,0.3);-moz-text-shadow:0px 0px 0 rgba(0,0,0,0.3);text-shadow:0px 0px 0 rgba(0,0,0,0.3);}
/* -- 메뉴 -- */
.middle_menu{height:60px;position:relative;z-index:3;-webkit-box-shadow:0 2px 2px rgba(255, 0, 0, 0.8);-moz-box-shadow:0 2px 2px rgba(0, 0, 0, .3);box-shadow:0 2px 2px rgba(0, 0, 0, .3);}
.gnb{white-space:nowrap; float:left;position:relative; }
.gnb li.first_li{float:left;white-space:nowrap;}
.gnb li{position:relative;}
.gnb li a{text-decoration:none;}
.gnb li a i{padding-left:5px;}
.gnb .first_span{position:relative;height:60px;display:inline-block;cursor:pointer;}
.gnb .hover_arrow{width:0px; height:0px; border:5px solid transparent;
border-top:0px;border-bottom-width:6px;border-bottom-style:solid;left:50%;margin-left:-5px;bottom:0; position:absolute; display:none;}
.gnb li.second_li a i{position:absolute;right:10px;top:15px;}
.main_menu div.sub1,
.main_menu ul ul.sub2{display:none;}
.main_menu div{position:absolute;left:0;top:100%;padding-right:10px;background:url(../img/empty.gif)}
댓글 5
-
캣대디
2015.04.25 20:44
두리웹님 너무 감사합니다 레이아웃 잘 사용하고 있습니다^^
예전 막코딩으로 html을 하는 건 쫌 했었는데 css는 완전 잼병이라 ㅎㅎ
열심히 해보겠습니다. 다시한번 감사드립니다~~
-
definef
2015.04.27 00:18
안녕하세요 두리웹님
-두리웹님이 말씀하신 부분을 참조하여, 아래와 같은 부분을 layout.css 부분을, 추가하였습니다.
calss main_menu UL을 가운데정렬을 하고자했습니다.
=> layout.html
<div class="gnb">
<ul id="menu" class="main_menu">
=> CSS부분
1. 처음 적용
.main_menu ul {text-align: center;}
.main_menu ul li {display: inline-block;}2. .gnb ul {text-align: center;}
.gnb ul li {display: inline-block;}하지만, 가운되 정렬이 되지가 않습니다. 뭘 잘못한건가요 ㅠ?
-브라우저는 크롬.
-
모얼더
2015.04.27 03:23
css 모르는 초보인데 사이트 들어가서 크롬 개발자 모드로 테스트 해보니
layout.css 파일에서
.gnb{white-space:nowrap; float:left;position:relative; }
.gnb li.first_li{float:left;white-space:nowrap;}
두 부분의 float:left; 속성을 삭제하니깐 메뉴들이 중앙 정렬하네요.
-
definef
2015.04.27 09:39
(float 이나 이런건 걸려 있으면 안됩니다) <- 감사합니다;
ie7 이하는 다르게 하셔야 하고요 그 이상은 이 방식이 먹힐겁니다.
가운데 두고 싶은 ul을 display:inline-block 시키시고요.(float 이나 이런건 걸려 있으면 안됩니다.)
그리고 ul을 감싸는 부분에 text-align:center 처리 하시면 메뉴가 가운데 배치 될겁니다.
어느정도 레이아웃을 수정하신게 아닌가 싶은데.. 이정도만 팁만 알아도 알아 하실거 같아서...