Menu
So I'm just trying to make a simple navbar and I just started playing around with flexbox. Why doesn't align-content work here? I can get justify-content to work but I just can't align vertically. Here's the code.
* {
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.
377
align-content manages the space between the lines when items wrap. align-items aligns the items relative to each other when sizes of items are different. When the size of the items are the same and there is only one line, they behave similarly.
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. The interactive example below uses Grid Layout to demonstrate some of the values of this property.
The align-items property specifies the default alignment for items inside the flexible container. Tip: Use the align-self property of each item to override the align-items property.
This has nothing to do with flexboxes. Just set the line height to 300px and you're done. (Also works for non-flexboxes.)
* {
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>You have 2 problems here:
align-content is for distributing space between multi-line flex items (eg. using flex-wrap: wrap). You're looking for the align-items property instead.#Navbar), not the flex container itself (#Navbar_Content_Wrapper). In other words, your flex container is only as tall as its contents.http://jsfiddle.net/qdv54k6f/
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
