Why is the vertical align property not working?

Question

<!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;

}

why is the vertical align property not working? I want the content to be displayed vertically in middle of the nav bar, but it is displayed at vertically top of the nav bar. I am a beginner trying to learn Web development . first code is the html part while second is the css stylesheet part

Pepe N O · Answer 1 · 2022-03-30T17:48:57.327

Because you are using a flex container, then you should align your elements on it as:

  *{
    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>

for further reference https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

By the way the vertical alignment on elements navl and navr result unnecessary. — Pepe N O, Mar 30 '22 at 17:37

score 0 · Accepted Answer · answered Mar 30 '22 at 17:31

The margin: 0vw; in your CSS *{ } is what is creating the issue. If you add margin: auto; to the navl and navr CSS you will be set. See Fiddle here

*{
    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;

}

Why is the vertical align property not working?

2 Answers2