Почему логотип сайта не отцентрировывается с элементами навигации?

Question

При попытке отцентрировать логотип с навигационными элементами шапки, логотип смещается вниз. Я не понимаю, почему так происходит. Помогите мне, пожалуйста!!

* {
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
    box-sizing: border-box;
}

h1, p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

li {
    display: inline-block;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.window {
    background-color: white;
    position: relative;
    max-width: 1440px;
    height: 100vh;
    margin-left: calc(100px + 140*(100vw - 1280px) / 640);
    margin-right: calc(100px + 140*(100vw - 1280px) / 640);
    box-shadow: 0 10px 150px 0 rgba(0, 0, 0, .3);;
}

header {
    width: 100%;
    height: 70px;
    padding: 0 100px;
}

header .container {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-side {
    display: flex;
    flex-flow: row nowrap;
}

.logo {
    display: inline-block;
    font-size: 48px;
}

.nav-list {
    display: flex;
    align-items: center;
}

.nav-list a{
    font-size: 18px;
    margin-right: 18px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Еда | Рецепты</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 
      crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="window">
        <header>
            <div class="container">
                <div class="left-side">
                    <a href="" class="logo">еда</a>
                    <ul class="nav-list">
                        <li><a href="#">Рецепты</a class="list-item-active"></li>
                        <li><a href="#">Журнал</a class="list-item"></li>
                        <li><a href="#">Идеи</a class="list-item"></li>
                        <li><a href="#">Авторы</a class="list-item"></li>
                    </ul>
                </div>

                <div class="right-side">
                    <input type="search" class="input-search">
                    <a href="#!" class="button-login">Вход</a>
                </div>

                </div>
            </div>
        </header>
    </div>
</body>
</html>

Answer 1

Тут проблема в том, что все итак уже центрировано, смещение возникает из-за шрифта т.к. лого представляет из себя просто текст, а не картинку или что-нибудь подобное.

Тут можно увидеть, что блок лого занимает всю высоту:

А если в стилях задать тексту лого свойство text-transform: uppercase;, либо если сразу в HTML написать в верхнем регистре, то будет видно, что лого центрировано:

Проблема именно из-за нижнего регистра.

Способы решения

Самое простое: использовать небольшой margin-top или translate для навигационного блока (который справа от лого) и сместить его ниже. Но тут проблема в том, что для другого шрифта (или размера шрифта) придется постоянно подбирать это смещение, а если планируется адаптив, то нужно будет также адаптировать и это смещение, например с помощью calc.
Подобная проблема уже обсуждалась на англоязычном SO и там тоже есть интересные варианты: https://stackoverflow.com/questions/43865712/how-to-vertically-align-lower-case-text-in-mobile-safari
Использовать лого в svg-формате и обернуть ссылкой.

БЛОГ НА HUSL

Почему логотип сайта не отцентрировывается с элементами навигации?

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