Comment dessiner un cercle avec du texte au milieu ?

Question

J'ai trouvé cet exemple sur stackoverflow :

Dessiner un cercle en utilisant uniquement le css

Ce qui est génial. Mais j'aimerais savoir comment modifier cet exemple afin de pouvoir inclure du texte au milieu du cercle ?

J'ai aussi trouvé ceci : Centrer verticalement et horizontalement le texte dans un cercle en CSS (comme le badge de notification de l'iphone)

mais pour une raison quelconque, ça ne fonctionne pas pour moi. Lorsque je crée le code de test suivant :

<div class="badge">1</div>

au lieu d'un cercle, j'obtiens une forme ovale. J'essaie de jouer avec le code pour voir comment je peux le faire fonctionner.

Answer 1

Fixer un line-height de la même valeur que la hauteur de la division affichera une ligne de texte centrée verticalement. Dans cet exemple, la hauteur et la hauteur de ligne sont de 500px.

Exemple

JSFiddle

.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>

Answer 2

Si votre contenu doit être enveloppé et d'une hauteur inconnue, c'est votre meilleur choix :

http://cssdeck.com/labs/aplvrmue

.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* may require vendor prefixes */
  background: yellow;
}

.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
}

<div class="badge">1</div>

Answer 3

Je pense que vous voulez écrire du texte dans un ovale ou un cercle ? Pourquoi pas celui-ci ?

<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>

Answer 4

Bien sûr, vous devez utiliser des balises pour faire cela. L'une pour créer le cercle et l'autre pour le texte.

Voici quelques codes qui peuvent vous aider

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    color:black;

}
.innerTEXT{
    position:absolute;
    top:80px;
    left:60px;
}

<div id="circle">
    <span class="innerTEXT"> Here a text</span>
</div>

Exemple concret ici http://jsbin.com/apumik/1/edit

Mise à jour

Ici moins petit avec quelques changements

http://jsbin.com/apumik/3/edit

Answer 5

S'il s'agit d'une seule ligne de texte, vous pouvez utiliser la propriété line-height, avec la même valeur que la hauteur de l'élément :

height:100px;
line-height:100px;

Si le texte comporte plusieurs lignes, ou si le contenu est variable, vous pouvez utiliser le padding-top :

padding-top:30px;
height:70px;

Exemple : http://jsfiddle.net/2GUFL/