将导航栏放置在div的垂直中心上

编程问答 2022-06-06

问题描述

我需要做这样的事情：

enter image description here

我已经编写了这段代码：

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的顶部：

enter image description here

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

centercenterhtmliconsnavnav