如何使用 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

如果您的导航

带有 #nav 类
然后您需要将该
项放入 div 容器中。将 div 容器设置为 100% 宽度。并将 text-align: 元素设置为在 div 容器中居中。然后在您的
中将该类设置为具有 3 个特定元素：text-align:center;位置：相对；并显示：内联块；

那应该将其居中。

Answer 4

只需添加：

*{
    margin: 0;
    padding: 0;
}

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

Answer 5

解决它的最佳方法我已经寻找了如何将导航菜单居中的代码或技巧，并找到了适用于所有浏览器和我的朋友的真正解决方案；）

这是我所做的：

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 6

您的 nav div 实际上已正确居中。但里面的ul却不是。给 ul 一个特定的宽度和中心。

Answer 7

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

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