Comment utiliser CSS pour entourer un nombre d'un cercle?

Je voudrais entourer un nombre dans un cercle comme dans cette image:

Est-ce possible et comment est-il réalisé?

Voici une démo sur JSFiddle et un extrait:

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

<div class="numberCircle">30</div>

Ma réponse est un bon point de départ, certaines des autres réponses offrent une flexibilité pour différentes situations. Si vous vous souciez d'IE8, regardez l' ancienne version de ma réponse.

Le problème avec la plupart des autres réponses ici est que vous devez modifier la taille du conteneur externe afin qu'elle soit la taille parfaite en fonction de la taille de la police et du nombre de caractères à afficher. Si vous mélangez des nombres à 1 chiffre et des nombres à 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 vous retrouverez soit avec un ovale soit avec un petit nombre aligné verticalement en haut d'un grand cercle. Cela devrait fonctionner correctement pour n'importe quelle quantité de texte et n'importe quel cercle de taille. Réglez simplement le widthet line-heightsur la même valeur:

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

<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

Si vous devez allonger ou raccourcir le contenu, il vous suffit d'ajuster la largeur du conteneur pour un meilleur ajustement.

Voir sur JSFiddle .

Si c'est 20 et moins, vous pouvez simplement utiliser les caractères unicode ode ② ... ⑳

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/

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

.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 le margin-'s pour déterminer le rayon, puis étend la hauteur pour correspondre en utilisant le padding-' s. Les margin-'devraient être ajustés en fonction de la taille de la police.

Mettre à jour pour supprimer l'élément intérieur:

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

<style type="text/css">
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}
</style>

Utilise des pseudo-éléments pour forcer la hauteur. Besoin d'espace de largeur nulle pour l'alignement vertical. Déplacé le line-height:0pxde l'extérieur vers le pseudo afin qu'il soit au moins visible lors de la dégradation pour IE8.

la manière la plus simple est d'utiliser la classe bootstrap et badge

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

Cette version ne repose pas sur des valeurs fixes codées en dur mais sur des tailles par rapport à celles font-sizedu 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:

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>

Vous pouvez utiliser le border-radius pour cela:

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>  

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 prend toujours pas en charge les coins arrondis.

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

HTML :

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

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 procéder. La plus grande question est de savoir s'il est possible de rendre les dimensions de l'échelle du cercle au contenu.

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

Tard dans la soirée, mais voici une solution bootstrap uniquement qui a fonctionné pour moi. J'utilise Bootstrap 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>

Vous ajoutez essentiellement des bg-dark text-white rounded-circle px-3 py-1 mx-2 h3classes à votre<span> élément (ou autre) et vous avez terminé.

Notez que vous devrez peut-être ajuster les classes de marge et de remplissage si votre contenu comporte plusieurs chiffres.

Vous travaillez comme avec un bloc standard, c'est-à-dire un carré

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

C'est une fonctionnalité de CSS 3 et ce n'est pas très bien corrigé, vous pouvez compter sur firefox et safari à coup sûr.

<div class="circle"><span>1234</span></div>

EXEMPLE HTML

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

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;

}

Tard dans la soirée mais voici la solution avec laquelle j'ai opté pour https://codepen.io/jnbruno/pen/vNpPpW

Css:

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

html:

<div class="panel-body">
                            <h4>Normal Circle Buttons</h4>
                            <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
                            </button>
</div>

Aucun travail supplémentaire requis. Merci John Noel Bruno

Faites quelque chose comme ça dans votre CSS

 div {
    largeur: 10em; hauteur: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    alignement du texte: centre; 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:

<body>
    <div class="circle"><p>30</p></div>
</body>

Améliorer la première réponse suffit de se débarrasser du remplissage et d'ajouter line-heightet 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;
}

Voici ma façon de le faire, en utilisant la méthode carrée. L'avantage est qu'il fonctionne avec des valeurs différentes, mais vous avez besoin de 2 portées.

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}

<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>

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

HTML:

<div class="numberCircle">30</div>

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 la solution la plus simple consiste à utiliser Bootstrap

<span class="badge" style ="float:right">123</span>