HTML：保證金汽車不是導航欄中工作

Question

因此，這裏是我的代碼：

<nav class="nav-container"> 
    <span class="nav-item">ABOUT ME</span> 
    <span class="nav-item">CONTACT ME</span> 
    <span class="nav-item">PORTFOLIO</span> 
</nav> 

和

.nav-item { 
    display:inline; 
    color:white; 
    padding:30px 10px; 
    font-style:bold; 
    font-family:sans-serif; 
    font-size:20px; 
    width:1000px; 
    margin:0 auto; 
} 

我想我在頁面中間爲中心的導航欄，以margin:auto，但由於某種原因，它不起作用。當我設置display:block時，它可以工作，但不會顯示在一行中。有人能告訴我這是爲什麼嗎？ 謝謝你...

Answer 1

內聯元素的行爲就像文本一樣，所以你需要把對齊放在父對象上。

在你的CSS，去掉margin:0 auto;，並添加text-align: center;上.nav-container：

.nav-item{ 
    display:inline; 
    color:white; 
    padding:30px 10px; 
    font-style:bold; 
    font-family:sans-serif; 
    font-size:20px; 
    width:1000px; 
} 

.nav-container { 
    text-align: center; 
} 

http://jsfiddle.net/5v7Lppkf/

Answer 2

對於內聯元素這樣的，使用的text-align：父元素中心，所以添加到您的css：

.nav-container { text-align:center } 

Answer 3

只需將以下規則添加到您的CSS：

.nav-container { text-align: center; } 

這應該是所有的魔法。