html - `<nav>` 和 `<center>` 中的下拉菜单未居中

Question

感谢这里的优秀人员，我已经解决了下拉菜单的一个问题。现在我有另一个小问题。我的导航栏中的下拉菜单没有居中。它应该直接在“Works”下，但它被移到了左边。

这是我的代码:

nav {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-decoration: none;
}

nav a,
.dropbtn {
  display: inline;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "mrs-eaves";
}

.dropbtn {
  background: none;
  border: none;
}

.dropdown {
  overflow: hidden;
}

.dropdown {
  cursor: pointer;
  font-size: 25px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: "mrs-eaves";
  margin: 0;
  text-decoration: none;
}

nav a:hover,
.dropbtn:hover,
.dropdown:hover,
.dropdown-content a:hover,
.dropbtn:focus {
  background-color: rgb(247, 219, 255);
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  position: relative;
}

.show {
  display: block;
}

<nav>
  <center>
    <a href="index.html">Home</a>
    <button class="dropbtn" onclick="myFunction()">Works
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="drawing.html">Drawing</a>
      <a href="animation.html">Animation</a>
      <a href="design.html">Design</a>
    </div>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="links.html">Links</a>
  </center>
</nav>

Answer 1

这是我的解决方案，我用 span 标签包装了 button 和 dropdown-content 类名为 holder，并使其 position: relative。这将确保 dropdown-content 将定位到其 span 父级。

我还删除了 nav 标签上的 overflow:hidden 属性，因为下拉菜单不可见

我已经添加了

 left: -26px;
 top: 30px;

为了将菜单定位在按钮的正下方

nav {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  /*overflow: hidden;*/
  margin-bottom: 30px;
  line-height: 1.5em;
  text-decoration: none;
}

nav a,
.dropbtn {
  display: inline;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "mrs-eaves";
}

.dropbtn {
  background: none;
  border: none;
}

.dropdown {
  overflow: hidden;
}

.dropdown {
  cursor: pointer;
  font-size: 25px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: "mrs-eaves";
  margin: 0;
  text-decoration: none;
}

nav a:hover,
.dropbtn:hover,
.dropdown:hover,
.dropdown-content a:hover,
.dropbtn:focus {
  background-color: rgb(247, 219, 255);
  cursor: pointer;
}

.dropdown-content {
  display: block; /*Added for testing purpose*/
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  
   left: -26px;
   top: 30px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  position: relative;
}

.show {
  display: block;
}

.holder{
position:relative;
}

.center{text-align:center;}

<nav>
  <div class="center">
    <a href="index.html">Home</a>
    <span class="holder">
    <button class="dropbtn" onclick="myFunction()">Works
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="drawing.html">Drawing</a>
      <a href="animation.html">Animation</a>
      <a href="design.html">Design</a>
    </div>
    </span>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="links.html">Links</a>
  </div>
</nav>