Html 为什么 align-content / align-items 在这里不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33200763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't align-content / align-items work here?
提问by Dev Sock
So I'm just trying to make a simple navbar and I just started playing around with flexbox. Why doesn't align-contentwork here? I can get justify-contentto work but I just can't align vertically. Here's the code.
所以我只是想制作一个简单的导航栏，我刚刚开始玩 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;
}<!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>Why on earth doesn't this center my items vertically? Please help me out because I'm just completely stumped as to why this isn't working. Even though its probably just something simple.
这到底为什么不垂直居中我的项目？请帮助我，因为我完全不知道为什么这不起作用。尽管它可能只是一些简单的事情。
回答by cimmanon
You have 2 problems here:
你在这里有两个问题：
- You're using the wrong property.
align-contentis for distributing space between multi-line flex items (eg. usingflex-wrap: wrap). You're looking for thealign-itemsproperty instead. - There's no extra space to distribute. The height is set on the flex container's parent element (
#Navbar), not the flex container itself (#Navbar_Content_Wrapper). In other words, your flex container is only as tall as its contents.
- 您使用了错误的属性。
align-content用于在多行弹性项目之间分配空间（例如使用flex-wrap: wrap）。您正在寻找该align-items物业。 - 没有额外的空间来分配。高度在 flex 容器的父元素 (
#Navbar) 上设置，而不是在 flex 容器本身 (#Navbar_Content_Wrapper) 上设置。换句话说，您的 flex 容器仅与其内容一样高。
回答by Mr Lister
This has nothing to do with flexboxes. Just set the line height to 300px and you're done. (Also works for non-flexboxes.)
这与 flexbox 无关。只需将行高设置为 300px 即可。（也适用于非弹性盒。）
* {
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;
line-height: 300px;
}
#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;
} <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>Edit: or the height or course. Silly me.
编辑：或高度或课程。傻我。
* {
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;
height: 300px;
align-items: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;
} <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>