Wie kann ich Text zwischen horizontalen Linien zentrieren?

Text innerhalb horizontaler Regeln zentrieren

Um horizontale Linien zu erstellen, die zentrierten Text flankieren, wurden verschiedene Lösungen vorgeschlagen, jede mit ihren eigenen Einschränkungen.

Ein gängiger Ansatz besteht in der Verwendung mehrerer <div> Elemente und deren Floating:

<div>

Dieser Ansatz kann jedoch zu Ausrichtungsproblemen führen. Ebenso kann die Verwendung einer Tabelle zu einer Fehlausrichtung führen:

<table><tr>
  <td>

Mit der Einführung von Flexbox entstand eine sauberere Lösung:

.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 Ansatz ermöglicht eine präzise Ausrichtung und macht die Notwendigkeit überflüssig für komplexe Markups oder „fudgy“-Lösungen.

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