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;并在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：center，所以添加到你的css：

.nav-container { text-align:center }

Answer 3

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

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

这应该做所有的魔术。

HTML：保证金自动无法使用导航栏

3 个答案: