Wie kann ich mit Flexbox Text innerhalb einer horizontalen Linie zentrieren?

Zentrierten Text zur Mitte einer horizontalen Linie hinzufügen

Ursprünglich ging es bei der Frage um Möglichkeiten, Text mithilfe horizontaler Regeln in xhtml 1.0 streng zu trennen . Die bereitgestellten Methoden wiesen jedoch Ausrichtungsprobleme auf, was zu einer Anfrage nach einer eleganten Lösung führte.

In der Antwort wird Flexbox als Schlüssel zur Lösung dieses Problems vorgestellt. Hier ist eine Aufschlüsselung des bereitgestellten Codes:

• .separator { ... } definiert einen Stil für das Hauptelement.
• display: flex; Legt fest, dass es sich um einen Flex-Container handelt.
• align-items: center; stellt sicher, dass Elemente innerhalb der Flexbox vertikal zentriert sind.
• text-align: center; zentriert den Textinhalt.

Um die horizontale Linie zu erstellen, wird der folgende Stil angewendet:

• .separator::before, .separator::after { ... } zielt auf Pseudoelemente vor und nach dem Inhalt ab.
• content: ''; Entfernt jeglichen Inhalt aus den Pseudoelementen.
• flex: 1; stellt sicher, dass sie den verfügbaren Platz gleichmäßig belegen.
• border-bottom: 1px solid #000; erzeugt den gewünschten Linieneffekt.

Um Abstand um den Text herum hinzuzufügen, werden die folgenden Stile angewendet:

• .separator:not(:empty)::before { . .. } und .separator:not(:empty)::after { ... } zielen nur dann auf die Pseudoelemente, wenn Text vorhanden ist Inhalt.
• margin-right und margin-left fügen Ränder links und rechts vom Text hinzu und sorgen so für eine Trennung von den horizontalen Regeln.

Der HTML-Code zeigt, wie man dies verwendet style:

• umschließt den Text im .separator Element.

  Diese Lösung nutzt die erweiterten Layoutfunktionen von Flexbox, um zentrierten Text und horizontale Linien einfach und elegant zu erstellen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox Text innerhalb einer horizontalen Linie zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!