Warum keine align-content / align-items, die hier arbeiten?

So dass ich versuche nur, um eine einfache Navigationsleiste, und ich begann das Spiel mit flexbox. Warum nicht align-content hier arbeiten? Ich kann justify-content zu arbeiten, aber ich kann einfach nicht vertikal ausgerichtet ist. Hier ist der code.

CSS:

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

HTML:

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

Warum auf der Erde nicht das Zentrum meiner Elemente vertikal? Bitte helfen Sie mir, denn ich bin gerade völlig ratlos, warum dies nicht funktioniert. Obwohl seine wahrscheinlich nur etwas einfaches.

InformationsquelleAutor Dev Sock | 2015-10-18

16

Haben Sie 2 Probleme:
1. Du verwendest die falsche Eigenschaft. align-content ist für die Verteilung der Raum zwischen multi-line-flex-items (zB. mit flex-wrap: wrap). Sie suchen für die align-items - Eigenschaft statt.
2. Es gibt keinen extra Raum zu verteilen. Die Höhe ist festgelegt auf die flex-container parent-Elements (#Navbar), nicht auf dem flex-container selbst (#Navbar_Content_Wrapper). In anderen Worten, Ihre flex-container ist nur so groß wie Ihr Inhalt.
http://jsfiddle.net/qdv54k6f/

InformationsquelleAutor cimmanon

Dies hat nichts zu tun mit flexboxes. Setzen Sie einfach die line-height auf 300px und du bist fertig. (Funktioniert auch für nicht-flexboxes.)

CSS:

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

HTML:

  <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: oder der Höhe oder dem Kurs. Dumm mich.

CSS:

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

HTML:

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

Wenn die downvoter kümmern würde, zu erklären, vielleicht können wir erarbeiten einen deal, erhalten Sie Ihre rep-Punkt zurück.
Nicht wirklich meine Frage beantworten obwohl. Ich will wissen, wie es mit flexboxes da bin ich sehr zuversichtlich, dass das einer der Zwecke der Verwendung von Ihnen. Ich weiß, ich kann mit line-height, aber ich möchte in der Lage sein zu verwenden, align-items. Oder zumindest wissen, warum es nicht funktioniert in diesem Fall?
Gut, die navbar_content_wrapper nicht haben eine Höhe gesetzt ist, so wird es Ihre Standard-Höhe (D. H. eine Zeile text). Es gibt kein CSS, erzählt Sie, sonst. Die flex-Eigenschaften wachsen nicht die navbar_content_wrapper auf eine größere Höhe.
Einfach nur neugierig, haben Sie Ihre Bearbeitungen nach dem Lesen meiner Antwort?
Ja, aber ich habe meine Kommentar zu der OP erstmal hier, bevor ich es Tat, damit Sie sehen können, war ich bereits Kenntnis von der Höhe das problem. Oder der Mangel an Höhe, so zu sprechen. Übrigens, ich denke immer noch meine ursprüngliche Lösung besser ist, weil es funktioniert mit und ohne flexboxes.
Sowieso, keine harten Gefühle. Hier ist ein upvote.

InformationsquelleAutor Mr Lister

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.