Question

可能重复：
Can we center those divs “IE7 and up” with variable width horizontally without using inline-block?

我正在尝试创建一个菜单，其背景图像跨越整个屏幕宽度，菜单内容在中间被限制为980px，菜单内容则在其中心对齐。

但我不想限制该区域超过980像素，因为菜单项目可能会在未来增加。

我在HTML中有以下结构：

<div class="menu">
  <nav class="primary_menu">
      <ul id="menu-primary">
           <li><a href="http://localhost:8888/maldonfire/">Home</a></li>
           <li><a href="http://localhost:8888/maldonfire/blog/">Blog</a></li>
      </ul>
  </nav>        
</div>

使用以下CSS：

/* Menu */
.menu{
background: url("images/menu_bg_home.jpg") repeat-x;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
}
.primary_menu ul li{
float: left;
}

由于

Answer 1

有很多方法可以实现您所要求的...最简单的方法是使用inline-blocks这样

.primary_menu ul{
    text-align: center;
}
.primary_menu ul li{
    /*float: left;*/
    display:inline-block;
    margin: 0 20px;
    *display : inline; /* for IE7 and below */
    zoom:1;
}

在此处查看我的答案：Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?

Answer 2

将你的.primary_menu li从float更改为：left to display：inline-block应该让菜单项居中对齐

Answer 3

试试这个demo或此demo2

.menu{
background:#ccc;
  padding:10px;
}
.primary_menu{
  background:#999;
display: block;
margin: 0px auto;
width: 980px;
height: 70px;

}
.primary_menu ul{
text-align: center;
list-style-type: none;
 margin:0px;
  overflow:auto;


}
.primary_menu ul li{
float: left;
line-height:4;
padding:5px;  
}

Answer 4

工作jsFiddle - 看看：

http://jsfiddle.net/dane/FyThW/21/

/* Menu */
.menu{
background-color: gray;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
background-color: lightgray;
}
.primary_menu ul{
list-style-type: none;
text-align: center;
}
.primary_menu ul li{
    display: inline-block;
}

在div中对齐中心菜单

4 个答案: