Comment puis-je centrer le texte dans une règle horizontale en HTML à l'aide de Flexbox ?

Ajout de texte centré aux règles horizontales

La tâche consistant à ajouter du texte centré dans des règles horizontales peut être difficile en HTML. Diverses approches ont été suggérées, mais elles aboutissent souvent à des désalignements ou à des solutions maladroites. Voici une solution élégante utilisant 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>

Ce code crée un conteneur flexible avec du texte centré. Les pseudo-éléments ::before et ::after forment les bordures horizontales, tandis que le sélecteur :empty évite toute marge inutile sur un conteneur vide. Cette solution permet un alignement propre et une personnalisation facile du style du séparateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!