Почему у меня не получается выровнять вертикально по центру фотографию и кнопки в шапке сайта?

Question

[Udivimenya]

html:

<header>
    <a href="index.html">
        <img src="BelHead.jpeg" alt="nevazhno" width="400" height="300">
    </a>
    
    <nav>
        <a href="num.html">Номера</a>
        <a href="contacts.html">Контакты</a>
        <a href="about-us.html">О нас</a>
    </nav>
</header>

css:

header {
    background-color: #00264d;
    color: #fff;
    text-align: center;
    padding: 0.3rem;
}

header img {
    width: 200px;
    height: auto;
    margin-left: -530px;
}


nav {
    text-align: center; /* Выравнивание содержимого по центру */
}

nav a {
    display: inline-block; /* Превращаем ссылки в блочные элементы */
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    margin: 0 10px;
    border: 1px solid #fff;
    border-radius: 5px;
}

/* Стили для ссылок внутри элемента <nav> при наведении курсора */
nav a:hover {
    background-color: #fff; /* Изменение цвета фона при наведении */
    color: #00264d; /* Изменение цвета текста при наведении */
}

ChatGPT решить проблему не смог, как бы я ему не объяснял...
Мне надо, чтобы кнопки и картинка были в центре по вертикали в шапке

Также, столкнулся с проблемой, что когда добавил фото, я хотел, чтобы я мог отступать от левого бока правее на несколько px, но он все время отступал от центра на право, как бы я не менял код. Но я справился решением, просто поставив минус (поэтому, если знаете как решить этот вопрос, что бы картинка могла отступать от левого бока на право, напишите ответ пожалуйста)

Спасибо тем, кто обратил внимание

Comments

[Mershana]

так нужно или же?

[Mors Clamor]

header {
display:flex;
justify-content: center;
}

Учите дети flexbox

Answer 1

[Mors Clamor]

header, nav {
display:flex;
justify-content: center;
}

Учите дети flexbox

Comments

[Udivimenya]

thank youuuuu ❤❤❤❤❤❤

[rootnoroot]

или грид