<ul>菜单不会中心</ul>

Question

我在wordpress上有一个菜单，我试图集中，但它不会居中。如果我将自动置于保证金上它没有做任何事情，但是当设置固定数字时，确实如此，但与使用auto不同，它不会完全对齐。

CSS

.menu {
    width:auto;
    float: left;
    display:block;
}

#navcontainer {
    display:inline;
    padding:0px;
    margin: 0px; /*-8px 0 0 10px;*/
    list-style:none;
    position:relative;
    z-index:1;
    float:left;
    height: 20px;
    width: 100%;
}

HTML

<section class="twelve columns text-center" style="background: transparent;">
<div class="menuimg">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/menu.jpg">
</div>
<div id="navcontainer">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'header-menu' ) ); ?></div>
</section> 

Answer 1

在您的css和#navcontainer的ul菜单设置中心尝试使用margin auto

按照以下方式更改css：

.menu {
  width: auto;
  float: none; /*set this to float:none*/
  display: inline-block; /*set this to display:inline-block*/
  margin-left: auto;
}
#navcontainer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
  margin-left: 0px; 
  overflow: hidden; /*add this to your css*/
}

#navcontainer ul li a{
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

Answer 2

HI现在替换样式表中的two css

#navcontainer {
float: none;
display: block;
list-style: none;
position: relative;
z-index: 1;
height: 20px;
width: 100%;
text-align: center;
}

.menu {
width: auto;
float: none;
display: inline-block;
text-align: left;
}