html - 导航栏中的中心链接和按钮

我想水平放置链接和按钮的中心，但是坦率地说，我不知道该怎么做。我将衷心感谢您的帮助！

我已经尝试过text-align: center;，但这不起作用。

<nav>
  <a href="#">Home</a>
  <div>
    <button>Products</button>
    <div>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#">About</a>
</nav>

nav {
  overflow: hidden;
  background-color: #333;
}

nav a {
  float: left;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

nav div {
  float: left;
  overflow: hidden;
}

nav div button {
  line-height: inherit;
  border: none;
  outline: none;
  color: white;
  padding: 15px;
  font-size: 1em;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

nav a:hover, nav div button:hover {
  background-color: #222;
}

nav div div {
  display: none;
  position: absolute;
  background-color: #eee;
  min-width: 160px;
  z-index: 1;
}

nav div div a {
  float: none;
  color: black;
  padding: 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}

nav div div a:hover {
  background-color: #ddd;
}

nav div:hover > div {
  display: block;
}

最佳答案

请尝试此代码。

的CSS

nav {
    display: flex;
    display: -webkit-flex; *for cross browser*
    justify-content: center;
    -webkit-justify-content: center; *for cross browser*
}

关于html - 导航栏中的中心链接和按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57737584/