Блог

Главная - Вопросы по программированию - Как идеально выровнять логотип и панель навигации по горизонтали?

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

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я хочу выровнять логотип с левой стороны, а навигационные ссылки с правой стороны по горизонтали.

В основном, я использовал display: flex .nav-wrapper и использовал align-items: center . Тем не менее, по-прежнему наблюдается небольшое несоответствие между логотипом и элементами навигационной ссылки, которые я, похоже, не могу понять, как правильно исправить. Был бы очень признателен за помощь в этом!

 *,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI";
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid blue;
}

.right-menu {
    display: flex;
    padding-right: 12px;
}

.right-menu .right-menu-items {
    display: flex;
}

.right-menu .right-menu-items li a {
    padding: 0 12px;
}

.logo {
    width: 80px;
    height: 80px;
}

.main-wrapper {
    background-image: url("/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    z-index: -1;
}

.main-wrapper .welcome-note {
    position: relative;
    top: 30%;
}  
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>italki: Learn a language online</title>
        <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
        <header class="nav-wrapper">
            <a href="#">
                <img src="./assets/white_logo.svg" alt="italki logo" class="logo" />
            </a>
            <nav class="right-menu">
                <ul class="right-menu-items">
                    <li><a href="#">Log in</a></li>
                    <li><a href="#">Sign up</a></li>
                    <li><a href="#">Become a Teacher</a></li>
                </ul>
            </nav>
        </header>
        <div class="main-wrapper">
            <div class="welcome-note">
                <h1>Become fluent in <br />any language</h1>
                <p
                    >Choose from over 10,000 teachers for 1-on-1 lessons based on your
                    goals and interests</p
                >
                <input type="text" placeholder="Choose a language" />
            </div>
        </div>
    </body>
</html>

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

1. Можете ли вы прикрепить скриншот текущего вывода?

2. Привет! Вот они dropboxlink и dropboxlink

Ответ №1:

Я создал демо, вот ссылка: https://jsfiddle.net/590nartL /

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

Сделайте это действительно горизонтально по центру, красная граница доказывает это.

Конечно, может быть, вы думаете, что шрифт в красной рамке не вертикальный, вы можете добавить стиль, как показано ниже:

 .right-menu {
  margin-top: -2px;
}

Любое отрицательное значение поля по вашему желанию.

Ответ №2:

Это происходит потому, что между <img> тегом и родительским тегом есть ненужный пробел <a> .

Это <img> встроенный элемент, так что это произошло.

Чтобы убрать пробел, сделайте <img> тег block элементом следующим образом или выполните выравнивание по вертикали.

 .logo {
  display: block;

  width: 80px;
  height: 80px;
}

или сделать родительский <a> стиль гибким

 a {
  display: flex;
  flex-direction: column;
}