如何使用 CSS/HTML 居中导航？

Question

我正在寻求帮助，让我的导航栏在我的网站上居中 Meridian Ridge

我已经看过很多已经提出这个问题的问题，并尝试了他们所说的，例如使用 display:inline & margin: 0 auto 但我所做的一切似乎都没有用

Answer 1

#header-right-section {
    text-align: center;
}

.main-navigation {
    display: inline-block;
}

Answer 2

试试这个

#menu-meridian-ridge{
margin: 0 auto;
width: 700px;
}

您需要指定一个非自动的宽度才能使边距 0 自动工作

Answer 3

或者你也可以使用这个：

#menu-meridian-ridge {
    display: flex;
    justify-content: space-around;
}

Answer 4

下面链接的 CodePen 是对另一个与导航相关的问题的回答，但它使用 display:inline-block 来实现居中对齐的导航结构，应该为您学习如何最好地实现这种风格提供基础。

http://codepen.io/rkieru/pen/JKyYpx

.navbar {
    list-style: none;
    margin: 0 auto;
    padding: 0 0 4px 0;
    text-align: center;
}

.navbar li { 
    display: inline-block; 
    margin: 5px 0;
}

.navbar a {
    display: block;
    padding: 0 15px;
}

Answer 5

无论您在导航中使用什么元素，只需确定您想要的宽度即可。

div.navigation {
   width:992px;
   margin-left:auto;
   margin-right:auto;
}

如何使用 CSS/HTML 居中导航？

How to center nav using CSS/HTML?

html

css

nav