Maison >interface Web >tutoriel CSS >Comment puis-je centrer le texte entre les règles horizontales ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-12-22 14:28:09890parcourir

How Can I Center Text Between Horizontal Rules?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn