Comment utiliser CSS pour entourer un nombre avec un cercle?

Voici une démo sur JSFiddle et un extrait:

.numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } 

 
30 

Le problème avec la plupart des autres réponses ici est que vous devez modifier la taille du conteneur externe de sorte qu’il s’agisse de la taille parfaite en fonction de la taille de la police et du nombre de caractères à afficher. Si vous mélangez des numéros à 1 chiffre et des numéros à 4 chiffres, cela ne fonctionnera pas. Si le rapport entre la taille de la police et la taille du cercle n’est pas parfait, vous obtiendrez soit un ovale, soit un petit nombre aligné verticalement en haut d’un grand cercle. Cela devrait fonctionner correctement pour toute quantité de texte et tout cercle de taille. Il suffit de définir la width et la line-height de line-height sur la même valeur:

 .numberCircle { width: 120px; line-height: 120px; border-radius: 50%; text-align: center; font-size: 32px; border: 2px solid #666; } 

 
1
 
100
 
10000
 
1000000 

Si la valeur est inférieure ou égale à 20, vous pouvez simplement utiliser les caractères Unicode ① ② …

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

Pour les tailles de cercle variant en fonction du contenu, cela devrait fonctionner:

http://jsfiddle.net/nzsnw55s/

 30 1 5435 2 100 .numberCircle { display:inline-block; line-height:0px; border-radius:50%; border:2px solid; font-size:32px; } .numberCircle span { display:inline-block; padding-top:50%; padding-bottom:50%; margin-left:8px; margin-right:8px; } 

Il s’appuie sur la largeur du contenu plus les margin- pour déterminer le rayon, puis étend la hauteur pour correspondre à l’aide des padding- . Les margin- devraient être ajustées en fonction de la taille de la police.

Mise à jour pour supprimer l’élément interne:

 30 1 5435 2 100  

Utilise des pseudo-éléments pour forcer la hauteur. Besoin de l’espace de largeur zéro pour l’alignement vertical. Déplacement de la line-height:0px de l’extérieur vers le pseudo pour qu’il soit au moins visible lors de la dégradation pour IE8.

le plus simple est d’utiliser la classe bootstrap et badge

  1 

Cette version ne repose pas sur des valeurs fixes codées en dur mais sur des tailles relatives à la font-size de font-size du div .

http://jsfiddle.net/qod1vstv/

CSS:

 .numberCircle { font: 32px Arial, sans-serif; width: 2em; height: 2em; box-sizing: initial; background: #fff; border: 0.1em solid #666; color: #666; text-align: center; border-radius: 50%; line-height: 2em; box-sizing: content-box; } 

HTML:

 
30
 
1
 
2 

Vous pouvez utiliser le border-radius pour cela:

      30   

Jouez avec le rayon de la bordure et les valeurs de remplissage jusqu’à ce que vous soyez satisfait du résultat.

Mais cela ne fonctionnera pas dans tous les navigateurs. Je suppose que IE ne supporte toujours pas les coins arrondis.

Ma solution ici – cela permet facilement différentes tailles et couleurs et lie dans un CMS pour le contrôle éditorial. Pour IE se dégradant en carrés.

HTML :

 
 
 Fashion & Beauty 
  

CSS :

 .circular-label { overflow: hidden; z-index: 100; vertical-align: middle; font-size: 11px; -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); } .label-inner { width: 85%; height: 85%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 2px dotted white; vertical-align: middle; margin: auto; top: 5%; position: relative; overflow: hidden; } .label-inner > span { display: table; text-align: center; vertical-align: middle; font-weight: bold; text-transform: uppercase; width: 100%; position: absolute; margin: auto; margin-top: 38%; font-family:'ProximaNovaLtSemibold'; font-size: 13px; line-height: 1.0em; } .circular-label.label-size-large { width: 110px; height: 110px; -moz-border-radius: 55px; -webkit-border-radius: 55px; border-radius: 55px; margin-top:-55px; } .circular-label.label-size-med { width: 76px; height: 76px; -moz-border-radius: 38px; -webkit-border-radius: 38px; border-radius: 38px; margin-top:-38px; } .circular-label.label-size-med .label-inner > span { margin-top: 33%; } .circular-label.label-size-small { width: 66px; height: 66px; -moz-border-radius: 33px; -webkit-border-radius: 33px; border-radius: 33px; margin-top:-33px; } 

Ce n’est pas trop difficile de voir comment faire cela. La plus grande question est de savoir s’il est possible de faire évoluer les dimensions du cercle vers le contenu.

Actuellement, je ne pense pas que ce soit possible. N’importe qui?

Vous travaillez comme avec un bloc standard, c’est un carré

 .circle { width: 10em; height: 10em; -webkit-border-radius: 5em; -moz-border-radius: 5em; } 

Ceci est une fonctionnalité de CSS 3 et ce n’est pas très bien, vous pouvez compter sur Firefox et Safari à coup sûr.

 
1234 

Faites quelque chose comme ça dans votre css

  div {
     largeur: 10em;  hauteur: 10em; 
     -webkit-border-radius: 5em;  -moz-frontière-rayon: 5em;
   }
   p {
     text-align: center;  margin-top: 4.5em;
   }

Utilisez la balise de paragraphe pour écrire le texte. J’espère que cela pourra aider

Quelque chose comme ce que j’ai fait ici pourrait fonctionner (pour les numéros 0 à 99):

CSS:

 .circle { border: 0.1em solid grey; border-radius: 100%; height: 2em; width: 2em; text-align: center; } .circle p { margin-top: 0.10em; font-size: 1.5em; font-weight: bold; font-family: sans-serif; color: grey; } 

HTML:

  
30
  

Pour améliorer la première réponse, il suffit de supprimer le remplissage et d’append une line-height et vertical-align :

 .numberCircle { border-radius: 50%; width: 36px; height: 36px; line-height: 36px; vertical-align:middle; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } 

EXEMPLE HTML

 
1 Regiones del Interior 

CODE

  .numberCircle { border-radius:50%; width:40px; height:40px; display:block; float:left; border:2px solid #000000; color:#000000; text-align:center; margin-right:5px; } 

La réponse de thirtydot est juste mais manque un petit point. Vous devez append la position: relative si vous souhaitez avoir une valeur centrée dans le cercle et inclure également une plage de numéros différente. Par exemple 123;

HTML:

30

CSS:

 .numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; position: relative; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } 

mais une solution la plus simple consiste à utiliser Bootstrap

123