Центр меню Wordpress выравнивается и равномерно распределяется

Question

Мне нужна помощь относительно моего меню. Я использую Wordpress на своем сайте, с темой Vantage, которую я даже купил премиум-тему.

Моя проблема заключается в следующем: я хотел бы, чтобы мои пункты меню были центрированы, равномерно распределены, и я не могу достичь этого, не испортив свои подменю.

Вот что я пытался до сих пор, но безуспешно: 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 для моего основного и моего подменю.

Мой сайт следующим образом: CSS http://classwebdesign.hu/testing/

мое меню выглядит следующим образом:

/* =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; 
} 

Спасибо за вашу помощь заранее!

EDIT: с ответом ниже я смог выровнять их по центру, но они не равномерно распределены, что было бы очень важно для меня. Благодаря!

Answer 1

Посмотрите на подобные ответы на сайте;

Align center menu within div

Это простой способ достижения того, что вы хотите, не портя свои подменю. Снимите поплавок с li и установите их display на inline-block. Затем установите text-align: center на родительскую ul;

.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; 
    }