Wie richtet man Text in einem Flexbox-Container ohne Wrapper vertikal aus?

Vertikale Textausrichtung innerhalb von Flexbox-Containern

Die vertikale Ausrichtung von Inhalten innerhalb eines Flexbox-Layouts kann eine Herausforderung sein. So erreichen Sie dies, ohne auf ein zusätzliches Wrapper-Element zurückgreifen zu müssen.

In Ihrem Beispiel liegt das Problem in der Verwendung von align-self: center auf dem

Element. Verwenden Sie stattdessen align-items: center on the parent

Element. Dadurch werden die untergeordneten Elemente von
• innerhalb des Flexbox-Containers vertikal ausgerichtet.

  Hier ist der aktualisierte Code:

  ul {
    height: 100%;
  }
  
  li {
    display: flex;
    justify-content: center;
    align-items: center;  /* Updated this line */
    background: silver;
    width: 100%;
    height: 20%;
  }

  Erklärung:

  • align-self gilt für einzelne Flex-Elemente und steuert deren Ausrichtung. In Ihrem Fall gilt jedoch das
  • ist kein Flex-Element, da auf sein übergeordnetes Element,
    , kein display:flex angewendet wird.
    • align-items steuert die Ausrichtung von Flex-Elementen innerhalb ihres Flex-Containers. Da die
    • ist ein flexibler Container, align-items: center zentriert effektiv vertikal die Elemente innerhalb des
    • .
    • Das Entfernen von align-self: center aus dem
    • ist von entscheidender Bedeutung, da es die durch align-items.
    angegebene vertikale Ausrichtung überschreiben würde

    Das obige ist der detaillierte Inhalt vonWie richtet man Text in einem Flexbox-Container ohne Wrapper vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!