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

Question

我想将链接和按钮水平居中，但坦率地说，我不知道该怎么做。非常感谢您的帮助!

我已经尝试过 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;
}

Answer 1

请试试这段代码..

CSS

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