Wordpress 메뉴 센터가 균등하게 배열되고 간격이 둡니다.

Question

제 메뉴 구성과 관련하여 도움이 필요합니다. 나는 프리미엄 테마를 구입 한 Vantage 테마로 내 사이트에서 Wordpress를 사용하고 있습니다.

내 문제는 다음과 같습니다. 메뉴 항목을 가운데에 배치하고 균등하게 간격을두고 싶습니다. 하위 메뉴를 망가뜨리지 않고이를 달성 할 수 없습니다. 여기

내가 성공하지 않고, 지금까지 시도 내용은 다음과 같습니다 https://stackoverflow.com/a/14103766/3990536 http://icode4you.net/wordpress-tricks-create-an-automatically-centered-and-evenly-spaced-navigation-menu/ https://stackoverflow.com/a/16274725/3990536

코드가 실제로 작동; 내 메뉴는 niceley와 정렬되지만 하위 메뉴에도 영향을 미치므로 동일한 클래스를 사용하기 때문에 가정합니다. 나는 그들을 위해 새로운 클래스를 정의하는 방법을 알아낼 수 없거나 실제 메인 메뉴에서 서브 메뉴를 분리 할 수 ​​없다.

여기에서 이해할 수없는 것은 내 하위 메뉴와 주 메뉴 간의 연결입니다. .main-navigation li을 편집하면 내 하위 메뉴도 영향을받으며 내 메인 메뉴와 하위 메뉴에 대해 별도의 li가 있어야합니다. http://classwebdesign.hu/testing/

내 메뉴의 CSS는 다음과 같습니다 : 사전에 도움을

/* =Menu 
----------------------------------------------- */ 
.main-navigation{ 
margin:0 -35px; 
background:#343538; 
font-size:1em; 
position:relative; 
text-transform:uppercase; 
letter-spacing: 0.08em; 
/* Font awesome icons */ 
/* General menu link styling */ 
/* For when the menu becomes a sticky menu */ 

} 
.main-navigation [class^="icon-"]{ 
display:inline-block; 
margin-right:15px; 
font-size:16px; 
line-height:0.5em; 
color:#CCCCCC; 
} 
.main-navigation a:hover [class^="icon-"]{ 
color:#FFFFFF; 
} 
.main-navigation ul{ 
list-style:none; 
margin:0; 
padding-left:0; 
zoom:1; 
/* Second level menu items */ 
} 
.main-navigation ul:before{ 
content:''; 
display:block; 
} 
.main-navigation ul:after{ 
content:''; 
display:table; 
clear:both; 
} 
.main-navigation ul li{ 
display:block; 
position:relative; 
float:left; 
} 

.main-navigation ul li:hover > a{ 
background:#00bcff; 
color:#FFFFFF; 
} 

.main-navigation ul li a{ 
padding:20px 35px; 
-ms-box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
} 
.main-navigation ul li a,.main-navigation ul li a > *{ 
-webkit-transition:all 0.4s ease; 
-moz-transition:all 0.4s ease; 
-o-transition:all 0.4s ease; 
transition:all 0.4s ease; 
} 
.main-navigation ul ul{ 
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15); 
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15); 
box-shadow:0 1px 2px rgba(0,0,0,0.15); 
background:#464646; 
display:none; 
position:absolute; 
top:100%; 
left:0; 
z-index:99999; 
/* Third Level Items */ 
} 
.main-navigation ul ul a{ 
width:200px; 
padding:15px 20px; 
} 
.main-navigation ul ul li{ 
position:relative; 
/* Hovering over 2nd level items */ 
} 
.main-navigation ul ul li:hover > a{ 
background:#00bcff; 
color:#FFFFFF; 
} 
.main-navigation ul ul ul{ 
left:100%; 
top:0; 
margin-left:0; 
} 
.main-navigation ul li:hover > ul{ 
display:block; 
} 
.main-navigation a{ 
display:block; 
text-decoration:none; 
color:#e2e2e2; 
font-weight:bold; 
} 

.main-navigation.sticky{ 
-webkit-box-shadow:0 2px 1px rgba(0,0,0,0.15); 
-moz-box-shadow:0 2px 1px rgba(0,0,0,0.15); 
box-shadow:0 2px 1px rgba(0,0,0,0.15); 
} 
body.has-menu-search .main-navigation ul{ 
margin-right:59px; 
} 
/* Handle the navigation slightly differently on mobile devices */ 
body.mobile-device .main-navigation ul ul{ 
display:none; 
} 
body.mobile-device .main-navigation li:hover > ul{ 
display:block; 
} 
.mobile-nav-frame [class^="icon-"]{ 
display:inline-block; 
margin-right:10px; 
min-width:1em; 
} 
.mobile-nav-icon{ 
font-family:'FontAwesome'; 
display:inline-block; 
margin-right:10px; 
} 
.mobile-nav-icon:before{ 
font-size:14px; 
content:"\f00b"; 
} 
#search-icon{ 
position:absolute; 
top:0; 
right:0; 
height:100%; 
} 
#search-icon #search-icon-icon{ 
-ms-box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
position:relative; 
display:block; 
cursor:pointer; 
background-color:#303134; 
width:59px; 
height:100%; 
} 
#search-icon #search-icon-icon,#search-icon #search-icon-icon .icon-search{ 
-webkit-transition:all 0.4s ease; 
-moz-transition:all 0.4s ease; 
-o-transition:all 0.4s ease; 
transition:all 0.4s ease; 
} 
#search-icon #search-icon-icon .icon{ 
position:absolute; 
display:block; 
width:17px; 
height:17px; 
top:50%; 
left:50%; 
margin-top:-8px; 
margin-left:-8.5px; 
background: url('images/sprites-1-2.png') no-repeat -102px 0; 
} 
#search-icon #search-icon-icon:hover{ 
background-color:#00bcff; 
} 
#search-icon #search-icon-icon:hover .icon{ 
background: url('images/sprites-1-2.png') no-repeat 0 0; 
} 
@media screen and (-webkit-min-device-pixel-ratio: 2) { 

#search-icon #search-icon-icon .icon{ 
background: url(images/retina/search-icon.png) no-repeat; 
background-size:17px 17px; 
} 
#search-icon #search-icon-icon:hover .icon{ 
background: url(images/retina/search-icon-white.png) no-repeat; 
background-size:17px 17px; 
} 
} 

#search-icon .searchform{ 
display:none; 
position:absolute; 
top:100%; 
right:0; 
width:1080px; 
background:#2d2e31; 
z-index:10; 
overflow-x:hidden; 
} 
#search-icon .searchform input[name=s]{ 
color:#d1d1d1; 
font-size:17px; 
font-weight:200; 
-ms-box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
display:block; 
width:100%; 
height:42px; 
border:none; 
-webkit-border-radius:0px; 
-moz-border-radius:0px; 
border-radius:0px; 
background:transparent; 
outline:none; 
padding:0 15px; 
} 

감사

내 사이트는 다음과 같습니다!

편집 : 아래의 대답으로 나는 그것들을 가운데 정렬 할 수 있었지만, 그들은 나에게 매우 중요 할만큼 균등하게 간격을 두지 않았습니다. 감사!

Answer 1

사이트에서 이와 같은 답변을보십시오.

Align center menu within div

그것은 당신이 당신의 하위 메뉴를 엉망으로하지 않고 원하는 것을 달성하는 간단한 방법입니다. li에서 부동을 제거하고 display 속성을 inline-block으로 설정합니다. 그런 다음 부모 ul에 text-align: center을 설정하십시오.

.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
    zoom: 1; 
    text-align: center; 
    } 

    .main-navigation ul li { 
    display: block; 
    position: relative; 
    /* float: left; */ 
    display: inline-block; 
    }