居中菜单

Question

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

我想创建具有背景图像跨越屏幕与约束菜单内容全宽菜单在980px的中间菜单内容然后在中心对齐。

喜欢这个：http://d.pr/i/eYcV

但我不想再约束面积小于980px的菜单项可能会在未来增加。

我在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

试试这个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 3

更改您的.primary_menu华里浮动的：左侧，以显示：inline-block的应该得到一致

菜单项中心

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; 
}​