Wie zentriere ich Text innerhalb eines Flexbox-Elements vertikal?

So richten Sie Text in einer Flexbox mithilfe von align-items vertikal aus

Bei Verwendung von Flexbox zum vertikalen Ausrichten von Inhalten in einem

Wenn Sie versuchen, align-self: center zu verwenden, kann es zu Schwierigkeiten kommen. Um dieses Problem zu beheben, sollten Sie stattdessen die Verwendung von align-items: center in Betracht ziehen.

Im Gegensatz zu align-self, das für Flex-Elemente gilt, ist align-items für Flex-Container anwendbar. In diesem Fall ist das li-Element der Flex-Container, der es align-items: center ermöglicht, seine untergeordneten Elemente vertikal zu zentrieren.

Hier ist eine aktualisierte Version Ihres Codes mit der notwendigen Anpassung:

ul {
  height: 100%;
}

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

Durch die Verwendung von align-items: center entfällt die Notwendigkeit eines Wrapper-Div. Damit können Sie den Text innerhalb des li-Elements vertikal ausrichten, ohne unnötige Elemente in Ihren Code einzuführen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text innerhalb eines Flexbox-Elements vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!