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

Question

我一直试图将 li 中的元素水平居中ul，但它不起作用。我尝试使用display:inline-blockforli和text-align:centerforul

这是这段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/

杰罗恩。

Answer 3

我会自己手动添加 margin-left: 200px; 到下面的代码。（或者不管它在中心，你可能不得不玩弄像素的数量）。

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