logo标签列表

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

htmlcssflexbox
13

所以我只是想制作一个简单的导航栏，刚开始尝试使用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>

为什么我的元素垂直居中不起来？请帮帮我，因为我完全被这个问题难住了。尽管这可能只是一些简单的事情。

2个回答
16
你有两个问题：
  1. 你使用的属性是错误的。 align-content 用于在多行伸缩项（例如，使用 flex-wrap: wrap）之间分配空间。你应该使用 align-items 属性。
  2. 没有额外的空间要分配。高度设置在伸缩容器的父元素（#Navbar），而不是伸缩容器本身（#Navbar_Content_Wrapper）。换句话说，你的伸缩容器的高度只有其内容那么高。
http://jsfiddle.net/qdv54k6f/
3

这与弹性盒子无关，只需将行高设置为300像素即可完成。 (对于非弹性盒子也适用。)

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

3
如果投票者能够解释一下，也许我们可以达成协议，以便您能够恢复声望分数。 - Mr Lister
4
不过那并没有回答我的问题。我想知道如何使用flexbox来实现，因为我非常有信心这是使用它们的目的之一。我知道我可以使用line-height，但我想能够使用align-items。或者至少知道为什么在这种情况下它不起作用？ - Dev Sock
@DevSock 嗯，navbar_content_wrapper 没有设置高度，因此它将具有其默认高度（即一行文本）。没有 CSS 告诉它其他。flex 属性不会使 navbar_content_wrapper 增加更大的高度。 - Mr Lister
只是好奇，你是在阅读了我的答案后进行的编辑吗？ - cimmanon
@cimmanon 是的，但我先在这里向OP发表了我的评论，所以你可以看到我已经意识到高度是问题所在。或者说是缺乏高度。顺便说一句，我仍然认为我的原始解决方案更好，因为它可以在有或没有flexbox的情况下工作。 - Mr Lister
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接