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

Question

我无法在此页面上将导航栏居中。

我尝试nav { margin: 0 auto; }了很多其他方法，但我仍然无法将其居中。

Answer 1

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

它应该可以工作，我在您的网站上对其进行了测试。

Answer 2

添加一些CSS：

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

Answer 3

如果你有你的导航<ul>类 #nav 那么你需要把那个<ul>项目放在一个 div 容器中。使您的 div 容器具有 100% 的宽度。并将 text-align: 元素设置为 div 容器的中心。然后在您的<ul>设置中，该类具有 3 个特定元素： text-align:center; 位置：相对；和显示：内联块；

那应该居中。

Answer 4

只需添加：

*{
    margin: 0;
    padding: 0;
}

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

Answer 5

您nav div实际上是正确居中的。但ul内部不是。给它ul一个特定的宽度和中心。

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

Answer 7

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

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