如何使用CSS或HTML将导航栏居中？

Question

我在尝试将导航栏居中在这个页面上时遇到了困难。

我已经尝试使用nav { margin: 0 auto; }以及其他多种方法，但仍然无法实现居中对齐。

- tokyowp

---

你所说的“居中导航栏”具体指什么？ - Peter Evjan

它是居中的。只是子元素不是。 - David Thomas

@David Thomas - 所以子元素导致主导航无法居中？ - tokyowp

不行，因为你看不到菜单的 background-color，子元素导致菜单 看起来 没有居中。给菜单添加一个 background-color 就好了。 - David Thomas

Answer 1

#nav ul {
    display: inline-block;
    list-style-type: none;
}

这应该可以工作，我在你的网站上进行了测试。

- morgar

---

我在你的网站上使用Firebug测试过了，它可以正常工作。我可以给你展示一张截图 :) - morgar

实际上，只添加 display: inline-block; 就可以了。我再次测试了一下。 - morgar

@morgar - 有没有什么想法可以让子元素与主元素对齐？ - tokyowp

@morgar - 是的，contest有一个子元素。 - tokyowp

inline-block 与居中有什么关系？这似乎有点荒谬，但它确实有效。 - Soren

Answer 2

添加一些CSS：

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}

- Niclas Sahlin

---

有没有办法使子元素与上面的单词对齐？ - tokyowp

您可以在子元素上设置 "text-align: left"。 - Niclas Sahlin

Answer 3

如果您有一个带有class #nav的导航<ul>， 那么您需要将该<ul>放在一个div容器中。 使您的div容器宽度为100%。并且在div容器中设置text-align:元素为中心。 然后在您的<ul>中设置该class具有3个特定元素：text-align:center; position:relative; 和display:inline-block; 这样就可以居中了。

- Brandon

Answer 4

只需添加：

*{
    margin: 0;
    padding: 0;
}

nav{
    margin: 0 auto;
    text-align: center;
}

- Nirmal Sankalana

Answer 5

你的 nav div 实际上已经正确居中了。但是里面的 ul 没有居中。给 ul 一个具体的宽度并将其居中。

- AlbertVo

Answer 6

修复它的最佳方法是我寻找了如何居中导航菜单的代码或技巧，并找到了真正的解决方案，它适用于所有浏览器和我的朋友们 ;)

这是我做的方式：

body {
    margin: 0;
    padding: 0;
}

div maincontainer {
    margin: 0 auto;
    width: ___px;
    text-align: center;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin-left: auto;
    margin-right: auto;
}

不要忘记设置 doctype html5

- polas

Answer 7

你还可以使用float和inline-block来居中你的导航，如下所示：

nav li {
   float: left;
}
nav {
   display: inline-block;
}

- camara