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

Zentrierten Text zu horizontalen Regeln hinzufügen

Das Hinzufügen von zentriertem Text innerhalb horizontaler Regeln kann in HTML eine Herausforderung sein. Es wurden verschiedene Ansätze vorgeschlagen, die jedoch oft zu Fehlausrichtungen oder ungeschickten Lösungen führen. Hier ist eine elegante Lösung mit Flexbox:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

Dieser Code erstellt einen flexiblen Container mit zentriertem Text. Die Pseudoelemente ::before und ::after bilden die horizontalen Ränder, während der Selektor :empty unnötige Ränder bei einem leeren Container verhindert. Diese Lösung ermöglicht eine saubere Ausrichtung und eine einfache Anpassung des Trennstils.

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