Comment puis-je centrer le texte entre les règles horizontales ?

Centrage du texte dans des règles horizontales

Pour créer des lignes horizontales qui encadrent le texte centré, diverses solutions ont été proposées, chacune avec ses propres limites.

Une approche courante consiste à utiliser plusieurs fichiers <div> éléments et les faire flotter :

<div>

Cependant, cette approche peut produire des problèmes d'alignement. De même, l'utilisation d'une table peut entraîner un désalignement :

<table><tr>
  <td>

Une solution plus propre est apparue avec l'introduction de 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>

Cette approche permet un alignement précis et élimine le besoin pour un balisage complexe ou des solutions « floues ».

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!