Question

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

为什么地球上的物品不垂直居中？请帮助我，因为我完全不知道为什么这不起作用。尽管它可能只是简单的事情。

Answer 1

这里有2个问题：

你正在使用错误的财产。 align-content用于在多行灵活项之间分配空间（例如，使用flex-wrap: wrap）。您正在寻找align-items财产。
没有额外的空间可供分发。高度在Flex容器的父元素（#Navbar）上设置，而不是在Flex容器本身（#Navbar_Content_Wrapper）上设置。换句话说，您的Flex容器只能与其内容一样高。

http://jsfiddle.net/qdv54k6f/

Answer 2

这与flexboxes无关。只需将行高设置为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>

编辑：或高度或路线。傻我。

* {
  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 个答案: