Блог

Главная - Вопросы по программированию - Расположить панель навигации по вертикальному центру div

Расположить панель навигации по вертикальному центру div

#html #css #icons #center #nav

#HTML #css #Значки #центр #навигация

Вопрос:

Мне нужно сделать что-то вроде этого:

введите описание изображения здесь

Я написал этот код:

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, поэтому не задавайте вопросов о {% %} частях кода. Они не являются причиной, по которой это не работает.

Комментарии:

1. Нет, я пытаюсь центрировать <nav> по вертикали

2. это точно такая же техника

3. Я уже видел этот вопрос перед публикацией своего вопроса, он просто не помогает из-за характера панели навигации и родительского div. Я все еще открыт для ответов, если вы хотите проверить это самостоятельно.

4. вместо usign nav вы могли бы использовать div или обернуть его в дополнительный div и вертикально центрировать эту оболочку div. Множество способов заставить это решение работать в вашем случае. Что еще rpevent вы делаете это?

5. Как я мог бы центрировать ее по вертикали?