Center navigation Menu in wordpress - html

Question

I'm working on old Wordpress page created with myMag theme, and I need to centralize menu bar, I'm pretty new to CSS and looking for various solutions I cant find any solutions for my case.
the CSS file looks like this:
#navcontainer #navbar {
float: left;
height: 51px;
line-height: 50px;
margin-left: -15px;
margin-top: 1px;
}
margin:0;
padding:0;
width:900px;
list-style-type:none;
display:table;
position:relative;
line-height:50px;
z-index:5;
ul {
text-align: justify
}
li {
display: inline-block
}
#navcontainer #navbar a {
height: 40px;
display: block;
padding: 0 21px;
text-decoration: none;
text-align: center;
line-height: 28px;
outline: none;
float: left;
z-index: 35;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 #515151;
font-weight: bold;
}
#navcontainer #navbar a:hover {
color: #CCC;
}
#navcontainer #navbar ul a {
line-height: 30px;
}
#navcontainer #navbar li {
float: left;
position: relative;
z-index: 20;
margin-top: 10px;
}
#navcontainer #navbar li li {
border-left: none;
margin-top: 0;
}
#navcontainer #navbar ul {
position: absolute;
display: none;
width: 172px;
top: 38px;
left: -1px;
background: #f5f5f5;
}
#navcontainer #navbar li ul a {
width: 130px;
height: auto;
float: left;
text-align: left;
padding: 0 21px;
color: #606060;
text-shadow: none;
}
#navcontainer #navbar ul ul {
top: auto;
}
#navcontainer #navbar li ul ul {
left: 172px;
top: 0px;
}
#navcontainer #navbar li ul ul a {
border-left: 1px solid #CCC;
}
#navcontainer #navbar ul {
border-top: none;
}
#navcontainer #navbar ul a,
#navcontainer #navbar ul li {
background-color: #e7e7e7;
}
#navcontainer #navbar ul a:hover,
#navcontainer #navbar ul a:focus {
color: #18649a;
}
#navcontainer #navbar li:hover ul ul,
#navcontainer #navbar li:hover ul ul ul,
#navcontainer #navbar li:hover ul ul ul ul {
display: none;
}
#navcontainer #navbar li:hover ul,
#navcontainer #navbar li li:hover ul,
#navcontainer #navbar li li li:hover ul,
#navcontainer #navbar li li li li:hover ul {
display: block;
}
php that creates menu looks like this:
<div id="navcontainer">
<div class="navigation">
<div class="wrapper">
<ul id="navbar">
<?php $exclude = $myOptions['pages_excl'];?>
<?php if(!$myOptions['pages_limit']) {
$limit = '10'; } else {
$limit = $myOptions['pages_limit'];
}
if($myOptions['pages_limit'] == '0') {
$limit = 0;
}
?>
<li>Home</li>
<?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit"); ?>
</ul>
</div>
</div>
</div>

Answer 1

You need to give the #navbar a fixed width and change the margin as following:
#navcontainer #navbar {
width: 600px; // change this to a width that suits your menu
height: 51px;
line-height:50px;
margin-left: auto;
margin-right: auto;
margin-top: 1px;
}
margin-left:auto; and margin-right: auto; center the navigation, this can only be done if the navigation has a fixed width. So you will need to adjust the fixed width when you change the number of items in the navigation.