在ul，superfish-modified.css中水平居中li元素的问题

Question

我一直试图将ul内的li元素水平居中，但它只是不起作用。我已尝试将display:inline-block用于li，text-align:center用于ul

以下是此css代码的主要部分：

  .sf-menu {
  background:#000;
  width: 1028px;
  position:relative;
  margin: 0;
  padding:0;
  }

 .sf-menu ul {
 text-align: center; /*yes, i tried to use text-align here*/
 margin: 0 auto;
 padding: 0px;
 position:absolute;
 top:-999em;
 width:10em; /* left offset of submenus need to match (see below) */
 z-index:99;
 }

 .sf-menu li {
 display:inline-block; /*attempted to use inline-block as suggested*/
 float:left;
 position:relative;
 margin:0;
 padding-left:2px;
 }

这是我想要做的事情的图片：

目前的情况如下：

Answer 1

我读了你的代码。你需要做一些修改，如下：

.sf-menu {
background:#000;
width: 1028px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
position:relative;
    margin: 0;
    padding:0;
}


.sf-menu li {
display:inline-block;
    float:none;
    position:relative;
    margin:0;
padding-left:2px;
}

问题在于，使用float: left;可以阻止text-align: center;完成工作。

Answer 2

基础：

div.sfmenu {
    width:100%;
    background:#ccc;
    text-align:center;
}

div.sfmenu ul {
    display:block;
    width:auto;
}

div.sfmenu ul li {
    display:inline-block;    
}

div.sfmenu ul li a {
    display:inline-block;
    padding-right:5px;
    color:#000;
}

参见工作示例http://jsfiddle.net/QV6Dv/3/

的Jeroen。

Answer 3

我只需手动添加margin-left：200px;到下面的代码。 （或者无论是什么使它在中心，你可能不得不玩像素数。）

.sf-menu {
  background:#000;
  width: 1028px;
  position:relative;
  margin:0; 
  padding:0;
  }