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

Question

所以我已经将导航栏设置得非常接近我想要的样子，但由于某种原因它不会转到我页面的中心。我试过放置 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>

Answer 1

我通常通过以下 3 个步骤解决此问题：

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

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

Answer 2

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

这是一个证明它看起来不错的工作示例：http://jsfiddle.net/611mbvtu/

Answer 3

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

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

参见fiddle：https://jsfiddle.net/c51kr3jo/

Answer 4

我加了

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

我从 this 很棒的文章中得到的。

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

Answer 5

导航栏中心

.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>

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

Why won't my nav bar center?

html

css

nav

centering

导航栏中心