html - 将导航栏定位在 div 的垂直中心

问题描述

我需要做这样的事情：

我写了这段代码：

HTML：

<html>
<head>
  <title>{% block title %} {% endblock %}</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css')}}">
</head>
<body>
  <div class="nav">
    <nav class="menu">
      <a href="{{ url_for('home') }}" class="menu__item" data-tooltip="Home">
        <i class="material-icons">home</i>
      </a>
      <a href="{{ url_for('about') }}" class="menu__item" data-tooltip="About">
        <i class="material-icons">account_box</i>
      </a>
      <a href="{{ url_for('skills') }}" class="menu__item" data-tooltip="Skills">
        <i class="material-icons">settings</i>
      </a>
      <a href="{{ url_for('projects') }}" class="menu__item" data-tooltip="Projects">
        <i class="material-icons">work</i>
      </a>
      <a href="{{ url_for('contact') }}" class="menu__item" data-tooltip="Contact">
        <i class="material-icons">email</i>
      </a>
    </nav>
  </div>
  {% block content %}
  {% endblock %}
</body>
</html>

CSS：

html{
    margin-left: 75px;
}

.nav{
    position: fixed;
    left: 0;
    width: 75px;
    height: 100%;
    background: #181818;
    font-size: 16px;
    font-family: sans-serif;
}

.menu{
    justify-content: center;
}

.menu__item{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    text-decoration: none;
    color: #a5a5a5;
    transition: background 0.3s;
}

但是，导航栏仍然显示在父 div 的顶部：

有谁知道我该如何解决这个问题？我究竟做错了什么。我通常不在 html 和 css 中工作，所以这可能很简单。

注意：我使用 python 框架来管理 html，所以不要质疑{% %}代码中的部分。它们不是这不起作用的原因。

标签： htmlcssiconscenternav

html - 将导航栏定位在 div 的垂直中心

问题描述

解决方案

推荐阅读