묻고답하기
[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 이나 이런건 걸려 있으면 안됩니다) <- 감사합니다;
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
Azpi | 2차 메뉴가 있을 때만 특정 div를 출력하게 하려면 어떻게 해야하나요 [2] | 2015.04.27 by Azpi |
도로테비 | 도움 주실분ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ | |
apleshade | 커뮤니티를 만들려고 하는데 기초가 없습니다. [2] | 2015.04.27 by daehyeok |
열목어 | 데이터이전시 xml파일 업로드 문제 문의드립니다. [2] | 2015.04.27 by 열목어 |
zartin |
이런 게시물 못막나요?
[4]
![]() | 2015.04.27 by ChrisPark |
ChrisPark |
마켓플레이스 언어를 바꾸고 싶어요
![]() | |
마음씨 | 아주 옛날 제로보드 사용 중에 DB 관련 [4] | 2015.04.27 by Double'U' |
동그라 | 카테고리 글 전부 보기. [4] | 2015.04.27 by 동그라 |
신다솔 | 캡차 엑박 뜨는 문제 해결방법 [2] | 2015.04.27 by paraduxx |
GREATGUY |
jw player 질문드립니다.(수정)
![]() | |
궁e | 게시판 사용자정의 변수에 링크 거는법 좀 알려주세요 ㅠ [4] | 2015.04.27 by 궁e |
동그라 |
제발 도와주세요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
[6]
![]() | 2015.04.27 by 동그라 |
아형여옹 | 위성 지도 표시 방법 어떠게 하나요? | |
간팸마 |
좀 도와주세요 ㅠㅠㅠ
[2]
![]() | 2015.04.27 by 몽실아빠 |
멀라나더 | XEDITION에서 슬라이더 css관련하여.. [2] | 2015.04.27 by 멀라나더 |
KaelXP |
socialxe 서버에 api요청이 실패했습니다.
[1]
![]() | 2015.04.27 by KaelXP |
진윤현파 |
스케치북5 게시판 스타일 수정(게시글 바탕 박스처리) 문의드립니다~
![]() | |
yong9551 | html 시현 비정상 [12] | 2015.04.27 by ehii |
ㅎㅕㄴㅣㄴㅔ | 중고장터모듈에서...회원연락처입력란이 안보이는데요??? | |
ㅎㅕㄴㅣㄴㅔ | 중고장터 모듈을 사용하고 있습니다.. |
ie7 이하는 다르게 하셔야 하고요 그 이상은 이 방식이 먹힐겁니다.
가운데 두고 싶은 ul을 display:inline-block 시키시고요.(float 이나 이런건 걸려 있으면 안됩니다.)
그리고 ul을 감싸는 부분에 text-align:center 처리 하시면 메뉴가 가운데 배치 될겁니다.
어느정도 레이아웃을 수정하신게 아닌가 싶은데.. 이정도만 팁만 알아도 알아 하실거 같아서...