居中菜單

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