Comment puis-je centrer parfaitement le texte à l'intérieur d'une bordure CSS circulaire ?

Centrer le texte dans des bordures circulaires

Améliorer l'attrait visuel des éléments Web peut impliquer de personnaliser les formes. Un modèle de conception courant consiste à créer un cercle avec du texte centré à l’intérieur. Cet article explore une solution basée sur CSS pour y parvenir.

Approche originale et pièges

Une approche populaire consiste à utiliser CSS seul pour dessiner un cercle. Bien que cette méthode fournisse un cadre de base, l’ajout de texte au centre peut s’avérer difficile. Tenter de centrer le texte verticalement dans un cercle à l'aide des solutions existantes peut entraîner une forme ovale plutôt qu'un cercle propre.

Solution : Ajuster la hauteur de la ligne

La clé pour Centrer parfaitement le texte dans un cercle consiste à définir la propriété line-height sur la même valeur que la hauteur du div du conteneur. En faisant cela, le texte sera aligné verticalement au centre du cercle.

Exemple de mise en œuvre

Voici un exemple démontrant la mise en œuvre :

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;  <!-- Adjusts vertical text alignment -->
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

Dans cet exemple, le conteneur div a une largeur et une hauteur de 500 pixels. La hauteur de ligne est également définie sur 500 pixels, ce qui garantit que le texte est centré verticalement. Il en résulte une forme parfaitement circulaire avec du texte soigneusement positionné au centre.

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!