html - wordpress中的中心导航菜单

Question

我正在处理使用 myMag 主题创建的旧 Wordpress 页面，我需要集中菜单栏，我对 CSS 很陌生，正在寻找各种解决方案，但我找不到适合我的案例的任何解决方案。

CSS 文件如下所示:

#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 如下所示:

    <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><a href="<?php echo get_settings('home'); ?>">Home</a></li>
  <?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit"); ?>
  </ul> 
</div>
</div>
</div>

Answer 1

您需要给#navbar 一个固定的宽度并更改边距如下:

#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; 和 margin-right: auto; 将导航居中，只有当导航具有固定宽度时才能这样做。因此，当您更改导航中的元素数时，您需要调整固定宽度。