Wie richtet man Text in einem „'-Element mithilfe von Flexbox ohne Wrapper vertikal aus?

Text in Flexbox vertikal ausrichten

Bei Verwendung von Flexbox zum vertikalen Ausrichten von Inhalten innerhalb eines

Element können Sie auf einige Herausforderungen stoßen. Viele Online-Tutorials empfehlen die Verwendung eines Wrapper-Divs, um diese Ausrichtung zu erreichen, indem den übergeordneten Flex-Einstellungen align-items: center zugewiesen wird. Es ist jedoch möglich, die Notwendigkeit eines zusätzlichen Elements zu beseitigen.

Um eine vertikale Ausrichtung ohne Wrapper-Div zu erreichen, passen Sie align-self:center an align-items:center an. Diese einfache Änderung sorgt für eine effektive Ausrichtung:

ul {
  height: 100%;
}

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

Denken Sie daran, dass align-self für Flex-Elemente gilt, die einen Flex-Container mit display:flex oder display:inline-flex erfordern. In diesem Fall ist das

ist der Flex-Container, daher ist align-items die geeignete Eigenschaft für die vertikale Ausrichtung.

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