Почему свойство вертикального выравнивания не работает?

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = "stylesheet" href = "style.css">
</head>
<body>
    <nav>
        <navl>
        <ul>
            <li><img src = "" alt = "logo"></li>
            <li><input type = "search"></li>
            <li><img src = "" alt = "hit"></li>
        </ul>
        </navl>

        <navr>
            <ul>
                <li><img src = "" alt = ""dp></li>
                <li>Name</li>
                <li>i1</li>
                <li>i2</li>
                <li>i3</li>
                <li>i4</li>
                <li>i5</li>
            </ul>
        </navr>
    </nav>



</body>
</html>

*{
    padding: 0vw;
    margin: 0vw;
}

nav{
    background-color: rgba(52, 52, 146, 0.829);
    display: inline-flex;
    justify-content: space-around;
    width: 100vw;
    height: 45px;
}

ul {
    display: inline-flex;
    list-style-type:none;
}

navl{
    border-color:red ;
    vertical-align: middle;
}
navr{
    vertical-align: middle;

}

почему свойство вертикального выравнивания не работает? Я хочу, чтобы содержимое отображалось вертикально в середине панели навигации, но оно отображалось вертикально вверху панели навигации. Я новичок, пытаюсь научиться веб-разработке. первый код - это часть html, а второй - часть таблицы стилей css

html css twitter-bootstrap

30.03.2022 19:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Поскольку вы используете гибкий контейнер, вы должны выровнять свои элементы на нем следующим образом:

  *{
    padding: 0vw;
    margin: 0vw;
   }

    nav{
        background-color: rgba(52, 52, 146, 0.829);
        display: inline-flex;
        justify-content: space-around;
        align-items: center; /*align items in a flex container*/
        width: 100vw;
        height: 45px;
    }

    ul {
        display: inline-flex;
        list-style-type:none;
    }

    navl{
        border-color:red ;
        /*vertical-align: middle;*/
    }
    /*navr{
        vertical-align: middle;

    }*/

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--<link rel = "stylesheet" href = "style.css">-->
</head>
<body>
    <nav>
        <navl>
        <ul>
            <li><img src = "" alt = "logo"></li>
            <li><input type = "search"></li>
            <li><img src = "" alt = "hit"></li>
        </ul>
        </navl>

        <navr>
            <ul>
                <li><img src = "" alt = ""dp></li>
                <li>Name</li>
                <li>i1</li>
                <li>i2</li>
                <li>i3</li>
                <li>i4</li>
                <li>i5</li>
            </ul>
        </navr>
    </nav>
</body>
</html>

для дальнейшего использования https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Кстати вертикальное выравнивание на элементах navl и navr результат ненужный.

— 30.03.2022 19:37

30.03.2022 19:30

Ответ принят как подходящий

margin: 0vw; в вашем CSS *{ } — это то, что создает проблему. Если вы добавите margin: auto; к пупок и навр CSS, вы будете установлены. См. Скрипку здесь

*{
    padding: 0vw;
    margin: 0vw;
}

nav{
    background-color: rgba(52, 52, 146, 0.829);
    display: inline-flex;
    justify-content: space-around;
    width: 100vw;
    height: 45px;
}

ul {
    display: inline-flex;
    list-style-type:none;
}

navl{
    border-color:red ;
    vertical-align: middle;
    margin: auto;
}
navr{
    vertical-align: middle;
    margin: auto;

}

30.03.2022 19:31

Другие вопросы по теме

Разрешить выпадающему списку переполнять другие компоненты, кроме нижнего колонтитула

Как изменить размер шрифта текста в div в javascript

Получите ВСЕ шрифты Google как Woff

Как я могу упростить эти селекторы CSS?

Как мне сделать тонкую изогнутую линию-разделитель между двумя изображениями?

Масштабировать элемент до размера пикселя

Ширина бутстрапа переполняется и не подходит для формы содержимого

Развернуть div в центре области просмотра, но сохранить соотношение сторон

<div> центр экрана, а не текст элемента

Как создать переключатель скрыть/показать

Почему свойство вертикального выравнивания не работает?

Ответы 2

Другие вопросы по теме

Похожие вопросы