為什么垂直對齊屬性不起作用？[復制]-有解無憂

這個問題在這里已經有了答案： Flexbox：水平和垂直居中（14個答案） Bootstrap 中心垂直和水平對齊（17 個答案） 7 小時前關閉。

<!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 樣式表部分

uj5u.com熱心網友回復：

您的margin: 0vw;CSS*{ }中的是造成問題的原因。如果您添加margin: auto;到navl和navr 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;

}

uj5u.com熱心網友回復：

因為您使用的是 flex 容器，所以您應該將其上的元素對齊為：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453125.html

標籤：html css 推特引导

上一篇：為什么導航欄位置=粘性不起作用？

下一篇：其他影像消失在另一個下