HTML:Margin 自动不能与导航栏一起工作

Question

所以这是我的代码：

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

.nav-container {
  background-color: black;
}

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

我想让我的导航栏在页面中间居中，margin: auto，但由于某些原因，它不起作用。当我设置 display: block 时，它有效，但不显示在一行中。有人能告诉我这是为什么吗？非常感谢...

Answer 1

内联元素的行为就像文本一样，因此您需要将对齐放在父元素上。

在您的 CSS 中，删除 margin:0 auto; 并在 .nav-container 上添加 text-align: center;:

.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:center，所以添加到您的 css:

.nav-container { text-align:center }

Answer 3

只需将以下规则添加到您的CSS：

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

这应该可以发挥所有作用。

HTML:Margin 自动不能与导航栏一起工作

HTML:Margin auto not working with nav bar

html

css

margin

nav