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

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

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

请参阅小提琴：https://jsfiddle.net/c51kr3jo/

Answer 2

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

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

Here是我创建的jsfiddle。希望它有所帮助。

Answer 3

我添加了

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

我从this惊人的文章中得到了。

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

Answer 4

导航栏中心

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

LAG

Answer 5

您的代码似乎已经开始工作（尽管您在示例中错过了结束</div>）。确保正确导入和应用CSS。

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

为什么我的导航栏不在中心？

5 个答案:

导航栏中心