Comment centrer le texte dans un cercle créé par CSS ?

Modification du cercle CSS pour inclure du texte centré

Vous avez trouvé un exemple utilisant CSS seul pour dessiner un cercle. Cependant, vous cherchez maintenant à le modifier pour inclure du texte au centre.

Essayez d'abord cette solution :

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

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

Malheureusement, cela peut donner une forme ovale au lieu de un cercle.

La solution

Pour centrer verticalement le texte, définissez la hauteur de la ligne être la même valeur que la hauteur du div. Dans l'exemple ci-dessus, la hauteur et la hauteur de ligne sont toutes deux définies sur 500 px.

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px; /* Vertically center the text */
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000;
}

Cette modification garantit que le texte est affiché centré dans le cercle.

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!