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


250

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

Numero nell'immagine del cerchio

Questo è possibile e come viene realizzato?

Risposte:


442

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.


L'attuale versione più recente di Internet Explorer, 9, attualmente supporta border-radius. ... e div non è un'ottima scelta per questo. :)
reisio,

7
display: blocco in linea;
Kirkland,

1
@KyleMit: Questa è una buona idea, in teoria. Sfortunatamente, CSS3 PIE ha una limitazione dello stesso dominio .
30

3
Per evitare di dover fare matematica nel CSS ogni volta che cambi la dimensione del carattere (una seccatura se stai facendo un design reattivo per esempio), puoi usare questo adattamento del jsfiddle di trenta punti che usa solo pixel per descrivere la dimensione del carattere: jsfiddle. net / dQR9T / 7058
Steven

1
@steven come assicurarsi che il cerchio sia sempre attorno al numero , oppure possiamo ingrandire il cerchio se il numero è 24928 trabocca ora
trasformatore

108

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 .


Questo è esattamente il problema che stavo riscontrando, mostrando una percentuale all'interno che potrebbe essere '1', '10' o '100'. Funziona perfettamente, grazie!
Felipe Castro,

Nota che questa modifica suggerita è stata negata, ma le modifiche in realtà centrano il testo un po 'meglio verticalmente, quindi le ho aggiunte manualmente alla risposta.
Mike,

Questa è la risposta migliore Vorrei usare translateY (-50%) invece del margine superiore negativo
Tobias,

@Tobias Grazie per la grande idea. Ho aggiornato la mia risposta.
Mike,

Sarebbe molto più pulito per rimuovere la durata e aggiungere il text-aligne line-heightal div. Ancora probabilmente la risposta migliore.
dlsso,


41

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.


5
Per me, questa è stata la soluzione migliore. Permette numeri più grandi ed è il più scalabile. Tutte le altre soluzioni hanno una codifica troppo dura delle dimensioni. Questo ha il minimo. Le dimensioni del carattere possono essere modificate in modo equo senza interrompere questa operazione. Se modificato drasticamente, il margine deve essere modificato, ma è molto tollerante. Dover usare un elemento nidificato è in qualche modo negativo.
Necreaux,

@Necreaux Aggiornata la risposta con una versione che sostituisce l'elemento interno esplicito con pseudo-elementi.
Ryachza,

1
La migliore soluzione davvero. Ho appena sostituito le dimensioni del margine sinistro e del margine destro di 0,35 em anziché 8px (riempimento nella soluzione aggiornata). In modo che sia possibile modificare la dimensione del carattere del numero e mantenere un margine adeguato.
Jibato,

25

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

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

4
Questo è fantastico! Sto già usando bootstrap, non sapevo che questa classe esistesse.
Justin

1
Bella risposta navid!
SeyedPooya Soofbaf,

22

Questa versione non si basa su valori hard-coded, fisso ma dimensioni relative alla font-sizedel div.

http://jsfiddle.net/qod1vstv/

inserisci qui la descrizione dell'immagine

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>

1
ciao questo è molto bello, ma se il numero è grande, anche in 100 o 1000 scorre fuori dal cerchio. Inoltre, sarebbe possibile utilizzare la dimensione del carattere per creare un nuovo colore di sfondo
trasformatore

1
Bella soluzione!
Jomofrodo,

8

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.


non dimenticare `-webkit-border-radius: 15px;` inoltre esiste una correzione per IE htmlremix.com/css/curved-corner-border-radius-cross-browser ma pensa due volte alla sua implementazione
Hannes,

+1 probabilmente il metodo più semplice ... anche il fallback per IE sembra ok (quadrato). wordpress lo fa in questo modo se ricordo
Ross,

4

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?


3

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.


2

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>

2

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;

}

Sebbene questo codice sia utile, sarebbe utile fornire alcune spiegazioni
tra cui il

2

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


Chi è John Noel Bruno? Se lo ricevi da un blog o tutorial, fornire link sarebbe un vantaggio
Dush,

1

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


1

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>

1

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

1

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>


0

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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.