Maison > interface Web > tutoriel CSS > Comment centrer le texte dans un cercle dessiné par CSS ?

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

Linda Hamilton
Libérer: 2024-12-07 02:01:11
original
591 Les gens l'ont consulté

How to Center Text within a CSS-Drawn Circle?

Comment dessiner un cercle avec du texte au centre

Pour créer un cercle avec du texte au milieu en utilisant CSS, modifiez le code utilisé pour dessiner le cercle :

  1. Définissez la hauteur de la ligne pour qu'elle corresponde à la hauteur du div. Cela force une seule ligne de texte à apparaître verticalement centrée. Dans l'exemple ci-dessous, la hauteur et la hauteur de ligne sont toutes deux définies sur 500 px.
.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}
Copier après la connexion
  1. Ajoutez du texte au div. Enveloppez le texte souhaité dans le champ
    élément.
<div class="circle">Hello I am A Circle</div>
Copier après la connexion

Ce code créera un cercle centré avec le texte "Bonjour, je suis un cercle" positionné au milieu.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal