为什么我的导航栏不居中？答案

【问题标题】：Why won't my nav bar center?为什么我的导航栏不居中？
【发布时间】：2015-10-21 16:56:14
【问题描述】：

所以我的导航栏设置得非常接近我想要的样子，但由于某种原因它不会进入我的页面中心。我试过把 text-align: center;在构成我的导航栏的大多数不同元素上，但无论我做什么它都不会消失。我做错了什么？

.navbar {
  margin: 0;
  padding: 0;
  text-align: center;
  border-bottom: solid #000;
  border-width: 1.5px 0;
  list-style: none;
  height: 25px;
  width: 1000px;
}
.navbar a {
  text-decoration: none;
  padding: 0;
  margin: 10px;
  border-bottom: 10px;
  color: #000;
  text-align: center;
}
li {
  display: inline-block;
  font-family: 'Muli', sans-serif;
  font-size: 19px;
  margin: 0;
  padding: 0;
  text-align: center;
}

<div class="banner">
  <h1>Brian Funderburke Photography &amp; Design</h1>
  <div class="nav">
    <ul class="navbar">
      <li><a href="home.html">Home</a>
      </li>
      <li><a href="photo.html">Photography</a>
      </li>
      <li><a href="design.html">Design</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>
    </ul>
  </div>

【问题讨论】：

您使用的是哪个浏览器？并把 text-align: center;仅在“.navbar”上，其他元素取自“.navbar”
如果我使用你的代码，我看不到你的问题。导航居中。
能否提供您网站的网址？

标签： html css nav centering

【解决方案1】：

将.banner 的宽度设置为100%，然后将.nav 设置为居中：

.banner{width: 100%;}
.nav{text-align: center;}

见小提琴：https://jsfiddle.net/c51kr3jo/

【讨论】：

【解决方案2】：

我如何解决这个问题通常是通过以下 3 个步骤：

向导航栏容器添加全角或大宽度（在您的情况下为 .nav div）
为导航栏添加宽度（通常尝试找到适合大多数元素的宽度）
将 margin: 0 auto 添加到导航栏（这将使 .navbar div 居中对齐）

Here 是我创建的一个 jsfiddle。希望对您有所帮助。

【讨论】：

太棒了。我很高兴它为你解决了；）我已经多次遇到这个问题，这就是我一直这样做的方式。但这可能是一个更好的方法，所以继续学习！ :)

【解决方案3】：

我加了

.nav {
    display: flex;
    justify-content: center;
}

这是我从thisAMAZING 文章中得到的。

http://jsfiddle.net/abalter/44w7b73f/

【讨论】：

【解决方案4】：

导航栏中心

.navbar {
  margin: 0;
  padding: 0;
  text-align: center;
  border-bottom: solid #000;
  border-width: 1.5px 0;
  list-style: none;
  height: 25px;
  width: 1000px;
}
.navbar a {
  text-decoration: none;
  padding: 0;
  margin: 10px;
  border-bottom: 10px;
  color: #000;
  text-align: center;
}
li {
  display: inline-block;
  font-family: 'Muli', sans-serif;
  font-size: 19px;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* center */
.nav1 {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;		

  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: auto;		
  
  text-align: center;  
}

.navbar1 {				

  -webkit-align-self: center;							
  align-self: center;
}

li a:hover {
  color: red;
  cursor: pointer;
}
/* || center */

<div class="nav1">
  <h1>Brian Funderburke Photography &amp; Design</h1>
</div>
<div class="nav nav1"> 
  <ul class="navbar navbar1">
    <li><a href="home.html">Home</a>
    </li>
    <li><a href="photo.html">Photography</a>
    </li>
    <li><a href="design.html">Design</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案5】：

据我所知，您的代码似乎已经在工作（尽管您在示例中缺少结束 </div>）。确保您的 CSS 已正确导入和应用。

这里有一个工作示例来证明它看起来没问题：http://jsfiddle.net/611mbvtu/

【讨论】：