所以我的问题是我的导航栏不会显示在屏幕中央(水平)，我不明白为什么，这是我经常遇到的问题，所以如果你能提供帮助，我将不胜感激。这是代码的链接
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
#logo {
display: block;
margin: 0 auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
} <body>
<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li><a href="home.html"></a>Home</li>
<li><a href="about-us.html"></a>About Us</li>
<li><a href="about-the-rally.html"></a>About The Rally</li>
<li><a href="our-car.html"></a>Our Car</li>
<li><a href="charities.html"></a>Charities</li>
<li><a href="sponsors.html"></a>Sponsors</li>
<li><a href="contact-us.html"></a>Contact Us</li>
</ul>
</nav>
</header>最佳答案
理想情况下，您应该有一些 header CSS 来将其内容居中，然后您可以按您想要的任何方式对齐 nav li 。我创建了一个 fiddle (与片段相同)来演示，并向 li 元素添加填充(否则它们会被压在一起)
希望这对您有所帮助。
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
header {
display: block;
margin: 0 auto max-height: 20em;
}
#logo {
display: block;
margin:auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
/*nav{text-align:center;}*/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
padding-right: 7px;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
}<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li>
<a href="home.html"></a>Home</li>
<li>
<a href="about-us.html"></a>About Us</li>
<li>
<a href="about-the-rally.html"></a>About The Rally</li>
<li>
<a href="our-car.html"></a>Our Car</li>
<li>
<a href="charities.html"></a>Charities</li>
<li>
<a href="sponsors.html"></a>Sponsors</li>
<li>
<a href="contact-us.html"></a>Contact Us</li>
</ul>
</nav>
</header>关于html - 导航栏不会显示在网页的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42938119/