垂直对齐不起作用

Question

我试图将类“link”的文本放在Y轴的中间。它似乎并不以Y轴为中心，我尝试过“中间”和“中心”。这可能是因为文本是内联的吗？或者也可能是因为其他CSS标签？我可以帮忙吗？我在下面提供了2段代码。

#top {
  z-index: -1;
  height: 100%;
  margin: 0;
  background: linear-gradient(to right, #00ace6, #007399);
}
#toggle {
  display: none;
}
input[type=checkbox]:checked ~ #nav {
  animation: fadein 1s 1 forwards;
  display: initial;
  vertical-align: middle;
}
#menuicon {
  z-index: 10;
  width: 50px;
  background: rgba(0, 0, 0, 0.1);
}
#nav {
  opacity: 0;
  display: none;
  position: absolute;
  padding: 0;
  margin: 0px;
  height: 50px;
  width: 50%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0px 20px 20px 0px;
}
#nav li {
  top: 50%;
  color: white;
  display: inline;
  vertical-align: middle;
}
#nav li a {
  margin-top: 5%;
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
}
#link {
  vertical-align: middle;
}

<div id="top">
  <input type="checkbox" id="toggle">
  <label for="toggle">
    <img id="menuicon" src="images/icons/Kitkatbar2.png">
  </label>
  <ul id="nav">
    <li class="link"><a href="#">About me</a>
    </li>
    <li class="link"><a href="#">Work</a>
    </li>
    <li>
      <a href="https://twitter.com/Littlebigbloxs">
        <img src="images/icons/twitterICON.png" style="height: 100%; border-radius: 10px;">
      </a>
    </li>
    <li>
      <a href="https://www.roblox.com/users/19619052/profile">
        <img src="images/icons/robloxICON.png" style="height: 100%; border-radius: 10px;">
      </a>
    </li>
    <li>
      <a href="mailto:littlebigblox@gmail.com">
        <img src="images/icons/emailICON.png" style="height: 100%; border-radius: 10px;">
      </a>
    </li>
  </ul>
  <h1 class="Title">littlebigblox</h1>
  <p align="center"></p>
</div>

Answer 1

尝试从 ul 更改为表。像那样：

<table><tr><td>About me </td><td>Work </td></tr></table>

因此，使用表格标记，您可以在 td 中使用垂直对齐。

Answer 2

将父母显示更改为显示：表格。然后，将孩子的显示更改为 display：table-cell 。这样，您可以使用 vertical-align：middle 属性。