Как выровнять некоторые по вертикали?

Question

Как выровнять некоторые <a> по вертикали?

HTML:

<div class="hat">
    <div class="hat_main_block">
        <div class="hat_menu_block">
            <a href="index.html"><img src="../site/src/logo.jpg"></img></a>
            <a>Москва</a>
            <a href="models.html">Модели</a>
            <a href="stocks.html">Акции</a>
            <a href="dealers.html">Дилеры</a>
            <a href="testdrive.html">Тест-драйв</a>
        </div>
    </div>
</div>

CSS:

.hat {
    width: 100%;
    height: 100px;
}
.hat_block {
    height: 45px;
    text-align: center;

    font-family: Arial;
    font-size: 22px;
}
.hat_block a {
    color: #000000;
    text-decoration: none;
}
.hat_block a:hover {
    color: #F7761F;
}

Получается что картинка LADA находится по центру, а вот слова "Москва", "Модели", "Акции", "Дилеры", "Тест-драйв" - нет. Как же мне добиться того, чтобы эти слова были выравнены по вертикали?

Answer 1

Это можно сделать так:

.element{
    position: "absolute";  // устанавливаем абсолютное позиционирование
    height: "50%"; // устанавливает высоту 50%. Т.е по центру.
}

Answer 2

Используйте свойства display: flex; и align-items: center; для родительского элемента .hat_menu_block

Answer 3

MaximLensky дал верный ответ! Вот как это можно сделать:

vertical-align: middle;

БЛОГ НА HUSL

Как выровнять некоторые по вертикали?

Ответы (3 шт):