为什么垂直对齐属性不起作用？

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;

}

为什么垂直对齐属性不起作用？我希望内容垂直显示在导航栏的中间，但它显示在导航栏的垂直顶部。我是一名尝试学习 Web 开发的初学者。第一个代码是 html 部分，第二个是 css 样式表部分

Answer 1

因为您使用的是弹性容器，所以您应该将其上的元素对齐为：

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

Answer 2

您的 CSS *{ } 中的 margin: 0vw; 是造成问题的原因。如果您将 margin: auto; 添加到 navl 和 navr CSS，您将被设置。 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?

html

css

twitter-bootstrap

为什么垂直对齐 属性 不起作用？

Why is the vertical align property not working?

html

css

twitter-bootstrap

为什么垂直对齐属性不起作用？