Wie vertikal ausrichten text innerhalb einer flexbox?

Möchte ich nutzen, flex-box, um vertikal ausrichten manche Inhalte innerhalb eines <li> aber nicht mit großem Erfolg.

Habe ich online geprüft und viele der tutorials eigentlich eine wrapper-div, das bekommt der align-items:center von der flex-Einstellungen auf der übergeordneten, aber ich Frage mich, ist es möglich, schneiden Sie das zusätzliche element?

Ich habe entschieden, mit flex-box in diesem Fall als das Listenelement Höhe wird ein dynamisches %.

CSS:

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

HTML:

<ul>
  <li>This is the text</li>
</ul>

InformationsquelleAutor styler | 2014-08-14
  1. 424

    Edit: Bitte verwenden Sie Die Antwort von Michael_B anstelle von mir.

    Ich würde löschen Sie diese Antwort, wenn ich könnte, aber akzeptierte Antworten können nicht gelöscht werden.

    Wenn Sie die flex-direction vertikal (mit column) dann justify-content: center Zentren vertikal. Dann können Sie einfach text-align: center zu Mitte horizontal als auch.

    li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

    Hier ein arbeiten demo auf codepen.

    • Super Antwort! Ein Nachteil bei dieser Lösung ist, dass alle tags, die in dieser neuen container werden gezwungen sein, auf Ihre eigene Linie. Zum Beispiel: a strong em.
    • FWIW, diese Lösung funktioniert nur innerhalb einer bestehenden flexbox-setup. IOW, können Sie nest-display:flex-Elemente, so haben z.B. horiz+vert-zentriert text in container-Elemente, die gleichmäßig verteilt sind, innerhalb von Ihre - container. Flexbox-FTW.
    • Bezüglich @nickspiel Kommentar, ich denke, dass Sie oft do brauchen Sie ein wrapper-div zu zentrieren komplexer Inhalte.
    • Keine Notwendigkeit zu ändern Richtungen. align-items: center; das ist, was es ist. align-items ist für die sekundäre flex-box Achse
    • In meinem Fall musste ich height: 100%; für div machen, damit es funktioniert.
    • Es funktioniert nicht, in einigen Situationen... text wrap unten ein Bild, zum Beispiel. Die richtige Lösung ist gegeben durch @Michael_B unten (align-items: center)
    • tatsächlich deins ist besser, weil ich nicht brauchen, um pro-entscheiden, die Höhe der inneren text-element
    • Sie sollten sich nicht mit den anderen Sie eine.

    InformationsquelleAutor Ben Visness
  2. 396

    Anstatt align-self: center verwenden align-items: center.

    Es gibt keine Notwendigkeit zu ändern flex-direction oder verwenden Sie text-align (wie vorgeschlagen in eine andere Antwort).

    Hier ist Ihr code, der mit einer Anpassung, damit es alle arbeiten:

    ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

    Den align-self Eigenschaft gilt für flex-Elemente. Außer Ihr li ist nicht ein flex-Element, weil seine Eltern – die ul – nicht display: flex oder display: inline-flex angewendet.

    Daher, die ul ist nicht ein flex-container, die li ist nicht ein flex-Element, und align-self hat keine Wirkung.

    Den align-items Eigenschaft ähnelt align-self, außer es gilt zu flex-Container.

    Da die li ist ein flex-container, align-items verwendet werden können, um vertikal zentrieren Sie die untergeordneten Elemente.

    CSS:

    * {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

    HTML:

    <ul>
  <li>This is the text</li>
</ul>

    codepen-demo

    Technisch, hier ist, wie align-items und align-self Arbeit...

    Den align-items Eigenschaft (auf den container) setzt den default-Wert von align-self (auf den items). Daher align-items: center bedeutet, dass alle flex items werden auf align-self: center.

    Aber Sie können diesen Standardwert überschreiben, indem Sie die Anpassung der align-self auf einzelne Elemente.

    Zum Beispiel, möchten Sie vielleicht gleich Höhe Spalten, so wird der container ist festgelegt align-items: stretch. Jedoch, ein Element muss fixiert werden, an der Spitze, so ist es festgelegt align-self: flex-start.

    Beispiel

    Wie ist der text ein flex-Element?

    Einige Leute Wundern sich vielleicht, wie ein run-of-text...

    <li>This is the text</li>

    ist ein Kind-element von der li.

    Der Grund ist, dass text, der nicht explizit gewickelt, die durch ein inline-level element ist algorithmisch eingewickelt durch eine inline-box. Dies macht es zu einem anonyme inline-element und Kind der Eltern.

    Aus der CSS-spec:

    9.2.2.1 Anonyme inline
    Boxen

    Jeglicher text, direkt enthalten, innerhalb eines block-container element
    behandelt werden muss als eine anonyme inline-element.

    Des flexbox-Spezifikation bietet ein ähnliches Verhalten.

    4. Flex-Items

    Jeder in-flow-Kind ein flex-container wird zu einem flex-Element, und jedes
    zusammenhängenden text, der direkt darin enthaltenen flex
    container wird verpackt in einem anonymen flex-Element.

    Daher, den text in der li ist ein flex-Element.

    • Ich mag align-items: baseline. Gut für die unterschiedlichen Höhen kommen aus verschiedenen unicode-chars etc.
    InformationsquelleAutor Michael_B
  3. 24

    Für zukünftige Googler,

    Den meisten Stimmen beantworten und den zweiten am meisten zu, sind für die Lösung dieses spezielle problem gepostet von OP, wobei der Inhalt(text) wurde als "algorithmic-ally" wird verpackt in inline-block-element. ABER Ihr Fall könnte in etwa zentrieren einer normalen element vertikal in einem container, der, die auch in meinem Fall, also für das, dass alles, was Sie brauchen, ist 

    align-self: center;

    Nur darum, dies hier, da dies das top-Ergebnis für die oben erwähnten Abfrage und auch ich war ziemlich verwirrt seit geraumer Zeit * Derp *

    • Dies sollte die richtige Antwort
    InformationsquelleAutor Mohd Abdul Mujib
  4. 15

    Der beste Zug ist, um nur nest einer flexbox innerhalb einer flexbox. Alles, was Sie tun müssen ist, geben das Kind align-items: center. Diese wird vertikal ausrichten text innerhalb des übergeordneten Elements ein.

    //Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}
    InformationsquelleAutor staypuftman
  5. -1

    CSS:

    * {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-items:center;
  background: silver;
  width: 100%;
  height: 20%;
}

    HTML:

    <ul>
  <li>This is the text</li>
</ul>

    • Code-nur die Antworten sind nicht sehr hilfreich... Kommentare hinzufügen oder eine Erklärung, was du getan hast, und warum es funktioniert.
    InformationsquelleAutor Swapnil
  6. -2

    Könnte man ändern die ul und li zeigt table und table-cell. Dann vertical-align für Sie arbeiten würde:

    ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

    http://codepen.io/anon/pen/pckvK

    • Funktioniert gut, bis Sie hinzufügen, ein weiterer Punkt der Liste drin.
    • Stimmt... Aber das wurde nie erwähnt
    • Sie gewechselt haben, aus der Höhe zu sein, auf der ul-anstelle des li? jedes li, Höhe wird dynamisch angepasst werden, so ist dies nicht etwas, die ich verwenden könnte, fürchte ich
    • Sie würde nicht in der Regel verwenden Sie eine Liste, wenn Sie nur beabsichtigt zu haben, ein Element. Das ist es, was divs sind für.
    • Wieder wahr... Aber ich sage nicht, dies ist ein perfektes Szenario. Ich habe gerade gebucht eine Lösung, die Antwort auf die Frage, wie es ist. Ich hoffe, diese Informationen können hilfreich sein, um jemand anderes liest es und hat ein anderes Szenario...
    • Auch... die display:table / display:table-cell Technik ist nützlich für die meisten element-Hierarchie... Also, ich Stimme zu, es ist nicht gewählt zu werden, als die korrekte Antwort, aber ich hoffe, es hilft jemand.

    InformationsquelleAutor LcSalazar
Schreibe einen Kommentar