为什么align-content/align-items不在这里工作？

Question

为什么align-content/align-items不在这里工作？

Dev*_*ock 10 html css html5 css3 flexbox

所以我只是想制作一个简单的导航栏,我刚刚开始使用flexbox.为什么不在align-content这里工作？我可以开始justify-content工作,但我无法垂直对齐.这是代码.

* {
    margin: 0;
    padding: 0;
}

#Navbar_Wrapper {

}

#Navbar {
    width: 100%;
    height: 300px;
    background: darkslategray;
}

#Navbar_Content_Wrapper {
    width: 100%;
    display: flex;
    list-style: none;
    justify-content: center;
    align-content: center;
}

#Navbar_Content_Wrapper li {
    display: inline-block;
}

#Navbar_Content_Wrapper a {
    color: white;
    font: 16px normal Arial;
    text-decoration: none;
    padding: 5px 10px 5px 0px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS Files/Navbar.css"/>
</head>
<body>
<section id="Navbar_Wrapper">
    <div id="Navbar">
        <div id="Navbar_Content_Wrapper">
            <div id="#Navbar_Content_Left">
                <ul>
                    <li><a href="#" id="Navbar_Home">Home</a></li>
                    <li><a href="#" id="Navbar_Forum">Forum</a></li>
                    <li><a href="#" id="Navbar_Search">Search</a></li>
                    <li><a href="#" id="Navbar_Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

为什么地球上的物品不垂直居中？请帮助我,因为我完全不知道为什么这不起作用.即使它可能只是简单的东西.

Answer 1

cim*_*non 16

你有两个问题:

你使用的是错误的财产. align-content用于在多线柔性物品之间分配空间(例如,使用flex-wrap: wrap).你正在寻找align-items房产.
没有额外的空间可供分发.高度在flex容器的父元素(#Navbar)上设置,而不是在flex容器本身(#Navbar_Content_Wrapper)上设置.换句话说,您的Flex容器仅与其内容一样高.

http://jsfiddle.net/qdv54k6f/

归档时间：	10 年，1 月前
查看次数：	21729 次
最近记录：	10 年，1 月前