All geek questions in one place

Why don't align-content / align-items work here?

So, I'm just trying to create a simple navigator, and I started playing with flexbox. Why doesn't align-content work here? I can make justify-content work, but I just can't vertically align it. Here is 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 does this not mean that my objects are upright? Please help me because I'm just completely at a dead end why this is not working. Although this is probably just something simple.

+5
source share
2 answers

You have 2 problems:

  • You are using the wrong property. align-content used to distribute space between multi-line flexible elements (for example, using flex-wrap: wrap ). Instead, you are looking for the align-items property.
  • There is no extra space for distribution. The height is set to the parent of the floppy disk container ( #Navbar ), not the flex container itself ( #Navbar_Content_Wrapper ). In other words, your flexible container is only as tall as its contents.

http://jsfiddle.net/qdv54k6f/

+11
source

This has nothing to do with flexboxes. Just set the line height to 300 pixels 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: either height or course. Stupid 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>
+2
source

Source: https://habr.com/ru/post/1233975/

More articles:


All Articles