如何集中导航栏

Question

如何集中我的导航栏？我尝试了一些方法，比如 <center>，但是，我不知道我做错了什么！

CSS:

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.NavItem {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #080808;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
text
}

a:hover, a:active {
    background-color: #7A991A;
}

HTML:

<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

请原谅导航按钮的标题，我正在制作一个专门介绍我和我所说和所做的美好事物的网站。

这是一个 JSFiddle：https://jsfiddle.net/ryfv3499/

Answer 1

您可以在 CSS 中添加以下内容：

.NavBar {
    list-style-type: none;
    /* margin: 0; */
    margin-left:auto;
    margin-right:auto;
    padding: 0;
    overflow: hidden;
}

这将使您的框居中，前提是它具有固定宽度；您可能还需要明确指定导航栏的宽度。

希望对您有所帮助

Answer 2

您必须添加 margin: 0 auto; 并定义您的元素 width。

.NavBar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width:500px;
}

这是fiddle：https://jsfiddle.net/ryfv3499/11/

Answer 3

更新 .NavBar CSS 规则

.NavBar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width:90%;
 }

您可以使用除 100% 以外的任何宽度

Answer 4

对 .NavItem

使用 display: inline-block

对于 .NavBar - text-align: center

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;
}

.NavItem {
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #080808;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
text
}

a:hover, a:active {
    background-color: #7A991A;
}

body { background-color: #D0D0D0; }

<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

如何集中导航栏

How to centralise navigation bar

html

css

navigationbar