Come usare i CSS per racchiudere un numero con un cerchio?

Vorrei circondare un numero in un cerchio come in questa immagine:

Questo è possibile e come viene realizzato?

Ecco una demo su JSFiddle e uno snippet:

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

La mia risposta è un buon punto di partenza, alcune delle altre risposte offrono flessibilità per situazioni diverse. Se ti interessa IE8, guarda la vecchia versione della mia risposta.

Il problema con la maggior parte delle altre risposte qui è che è necessario modificare la dimensione del contenitore esterno in modo che sia la dimensione perfetta in base alla dimensione del carattere e al numero di caratteri da visualizzare. Se stai mescolando numeri di 1 cifra e numeri di 4 cifre, non funzionerà. Se il rapporto tra la dimensione del carattere e la dimensione del cerchio non è perfetto, finirai con un ovale o un piccolo numero allineato verticalmente nella parte superiore di un cerchio grande. Questo dovrebbe funzionare bene per qualsiasi quantità di testo e cerchio di qualsiasi dimensione. Basta impostare widthe line-heightsullo stesso valore:

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

Se è necessario allungare o ridurre il contenuto, è sufficiente regolare la larghezza del contenitore per adattarlo meglio.

Guardalo su JSFiddle .

Se è 20 e inferiore, puoi semplicemente usare i caratteri unicode ① ② ... ⑳

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

Per le dimensioni delle cerchie che variano in base al contenuto, questo dovrebbe funzionare:

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;
}

Si basa sull'ampiezza del contenuto e su margin-"s" per determinare il raggio, quindi estende l'altezza in modo che corrisponda a padding-"s". I margin-'s avrebbero bisogno di essere regolato in base al font-size.

Aggiornamento per rimuovere l'elemento interno:

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

Utilizza pseudo-elementi per forzare l'altezza. È necessario lo spazio di larghezza zero per l'allineamento verticale. Spostato line-height:0pxdall'esterno allo pseudo in modo che sia almeno visibile quando si degrada per IE8.

il modo più semplice è usare bootstrap e la classe badge

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

Questa versione non si basa su valori hard-coded, fisso ma dimensioni relative alla font-sizedel 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>

Per questo puoi usare il raggio del bordo:

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

Gioca con il raggio del bordo e i valori di riempimento fino a quando non sei soddisfatto del risultato.

Ma questo non funzionerà in tutti i browser. Immagino che IE non supporti ancora gli angoli arrotondati.

La mia soluzione qui - questo consente facilmente diverse dimensioni, colori e legami in un CMS per il controllo editoriale. Per IE degradante ai quadrati.

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;
}

Non è troppo difficile vedere come farlo. La domanda più grande è se è possibile rendere le dimensioni della circonferenza in scala al contenuto.

Attualmente non penso sia possibile. Chiunque?

In ritardo alla festa, ma ecco una soluzione solo per bootstrap che ha funzionato per me. Sto usando 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>

Fondamentalmente aggiungi bg-dark text-white rounded-circle px-3 py-1 mx-2 h3classi al tuo <span>(o qualunque altro elemento) e il gioco è fatto.

Tieni presente che potrebbe essere necessario modificare le classi di margine e di riempimento se il contenuto ha più di una cifra.

Lavori come con un blocco standard, ovvero un quadrato

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

Questa è la caratteristica di CSS 3 e non è molto ben tollerata, puoi sicuramente contare su Firefox e Safari.

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

ESEMPIO HTML

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

CODICE

    .numberCircle { 

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

}

In ritardo alla festa, ma ecco la soluzione che ho scelto con 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>

Non è richiesto alcun lavoro extra. Grazie John Noel Bruno

Fai qualcosa del genere nel tuo css

 div {
    larghezza: 10em; altezza: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margine superiore: 4.5em;
  }

Usa il tag di paragrafo per scrivere il testo. spero che aiuti

Qualcosa di simile a quello che ho fatto qui potrebbe funzionare (per i numeri da 0 a 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>

Migliorare la prima risposta è sufficiente eliminare l'imbottitura e aggiungere line-heighte 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;
}

Ecco il mio modo di farlo, usando il metodo quadrato. il lato positivo è che funziona con valori diversi, ma sono necessarie 2 campate.

.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 risposta di thirtydot è giusta ma manca un piccolo punto. Devi aggiungere la posizione: relativa , se vuoi avere un valore centrato nel cerchio e includere anche un diverso intervallo di numeri. Ad esempio 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;
}

ma una soluzione più semplice è usare Bootstrap

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