中心响应式导航栏

Question

我正在按照 w3schools 的指南为我的网站构建响应式顶部导航栏：How TO - Responsive Top Navigation

但是，我希望导航项在页面上居中，而不是左对齐或右对齐。 w3schools 甚至还有关于中心导航元素的第二个教程 link，但是当我尝试将此代码用于多个导航元素时，它们要么都在彼此内部，要么相互堆叠！

更令我沮丧的是，之前有一个关于这个确切问题的问题（），但该示例的代码似乎同时发生了很大变化，因此答案是不再适用。 :(

Answer 1

要在您提供的 link 中居中顶部导航，您需要将以下内容添加到 .topnav：

.topnav {
  …
  display: flex;
  justify-content: center;
}

要定位移动菜单（而不是将其居中），请将以下内容添加到您的@media 查询中：

@media screen and (max-width: 600px) {
  …
  .topnav { display: block; }
}

之前

之后

Answer 2

一种方法是将链接包裹在 div 中（比如 div 和 class nav-links），然后应用于 div:

.nav-links {
    width: fit-content; /* 'margin: auto' alone does not work if the div takes full width */
    margin: auto;
}

下面是基于您链接的教程的演示：

.nav-links {
  width: fit-content;
  margin:auto;
}

/*//////////////  W3Schools CSS code //////////////*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <div class="nav-links">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

中心响应式导航栏

Center responsive navigation bar

html

css

css-float

之前

之后