时间戳

首页 > 解决方案 > 使菜单居中的正确方法是什么？

css - 使菜单居中的正确方法是什么？

问题描述

我正在向网站添加一个响应式导航栏，该导航栏非常基于 w3 学校教程 ( https://www.w3schools.com/howto/howto_js_topnav_responsive.asp )。一切正常，除了我试图将菜单链接集中在页面上（对于桌面版本），而不是像教程解释的那样将它放在左侧。

我尝试修改每个属性的值，包括浮点数，但到目前为止没有成功。它一定非常简单，但我错过了什么？

html:

  <div class="nav" id="nav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#menu">Menu</a>
    <a href="#drinks">Drinks</a>
    <a href="#values">Values</a>
    <a href="#gallery">Gallery</a>
    <a href="#booking">Booking</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
    </a>
  </div>

CSS：

.nav {
  background-color: gold;
  overflow: hidden;
}
.nav a {
  float: left; 
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.nav a:hover {
  background-color: pink; 
  color: green;
}
.nav .icon {
  display: none;
}

我看到这个问题已经用 bootstrap 提出了，但是作为初学者，我在这里只使用纯 css。

标签： css

解决方案

您可以将 flex 与中心布局一起使用，试一试

.topnav {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #333;
}

推荐阅读