无法在 CSS 网格框中垂直居中导航栏

Question

一段时间以来，我一直在努力解决这个问题。如果我实际用视觉表示，我将最好地解释它：

我正在尝试垂直对齐我的导航栏。

我已经尝试使用 align-self，但似乎没有任何变化。

/* Navigation */

.navigation {
  overflow: hidden;
  margin: 0;
  align-self: center;
}

.navigation a {
  display: block;
  float: right;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
}

.navigation a:hover {
  background-color: #ddd;
  color: black;
}

/* Hide the link that should open and close the navigation on small screens */
.navigation .icon {
    display: none;
}

这是我对自己的 css 感到困惑的情况，还是 div 定位不正确的情况？

<!-- Navigation bar -->

    <div class="navigation" id="myNavigation">
      <a href="index.html">Home</a>
      <a href="#services">About Me</a>
      <a href="#about-me">Services</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#contact">Contact</a>
      <a href="javascript:void(0);" class="icon" onclick="openNavigation()">&#9776;</a>
    </div>
  </div>

Answer 1

好的，所以我找到了解决方案。我需要制作 css 网格 display: flex 和 align-items: center。

无法在 CSS 网格框中垂直居中导航栏

Cannot vertically center navigation bar within a CSS grid box

html

css

vertical-alignment

css-grid