Wie verwende ich CSS, um eine Zahl mit einem Kreis zu umgeben?

250

Ich möchte eine Zahl in einem Kreis wie in diesem Bild umgeben:

Nummer im Kreisbild

Ist das möglich und wie wird es erreicht?

Pentium10
quelle

Antworten:

442

Hier ist eine Demo zu JSFiddle und ein Ausschnitt:

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

Meine Antwort ist ein guter Ausgangspunkt, einige der anderen Antworten bieten Flexibilität für verschiedene Situationen. Wenn Sie sich für IE8 interessieren, schauen Sie sich die alte Version meiner Antwort an.

dreißig Punkte
quelle
Die aktuellste Version von Internet Explorer 9 unterstützt tatsächlich den Rahmenradius. ... und div ist dafür keine gute Wahl. :)
Reisio
7
Anzeige: Inline-Block;
Kirkland
1
@ KyleMit: Das ist theoretisch eine gute Idee. Leider hat CSS3 PIE eine Einschränkung für dieselbe Domäne .
dreißig Punkte
3
Um zu vermeiden, dass Sie beim Ändern der Schriftgröße im CSS rechnen müssen (ein Problem, wenn Sie beispielsweise ein responsives Design verwenden), können Sie diese Anpassung von 30s Punkts jsfiddle verwenden, bei der nur Pixel zur Beschreibung der Schriftgröße verwendet werden: jsfiddle. net / dQR9T / 7058
Steven
1
@steven wie man sicherstellt, dass der Kreis immer um die Zahl ist , oder können wir den Kreis größer machen, wenn die Zahl 24928 ist, läuft er gerade über
Transformator
108

Das Problem bei den meisten anderen Antworten besteht darin, dass Sie die Größe des Außencontainers so anpassen müssen, dass die perfekte Größe auf der Schriftgröße und der Anzahl der anzuzeigenden Zeichen basiert. Wenn Sie 1-stellige und 4-stellige Zahlen mischen, funktioniert dies nicht. Wenn das Verhältnis zwischen Schriftgröße und Kreisgröße nicht perfekt ist, erhalten Sie entweder ein Oval oder eine kleine Zahl, die vertikal am oberen Rand eines großen Kreises ausgerichtet ist. Dies sollte für jede Textmenge und jeden Kreis funktionieren. Setzen Sie einfach das widthund line-heightauf den gleichen Wert:

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

Wenn Sie den Inhalt länger oder kürzer machen müssen, müssen Sie lediglich die Breite des Behälters anpassen, um eine bessere Passform zu erzielen.

Sehen Sie es auf JSFiddle .

Mike
quelle
Das ist genau das Problem, das ich hatte. Es zeigt einen Prozentsatz im Inneren, der '1', '10' oder '100' sein kann. Das funktioniert perfekt, danke!
Felipe Castro
Beachten Sie, dass diese vorgeschlagene Bearbeitung abgelehnt wurde, aber die Änderungen den Text vertikal etwas besser zentrieren, sodass ich sie manuell zur Antwort hinzugefügt habe.
Mike
Dies ist die bessere Antwort. Ich würde translateY (-50%) anstelle des negativen oberen Randes verwenden
Tobias
@Tobias Danke für die tolle Idee. Ich habe meine Antwort aktualisiert.
Mike
Es wäre viel sauberer, die Spanne zu entfernen und das text-alignund line-heightzum div hinzuzufügen . Immer noch wahrscheinlich die beste Antwort.
dlsso
41

Bei Kreisgrößen, die je nach Inhalt variieren, sollte dies funktionieren:

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

Es basiert auf der Breite des Inhalts plus den margin-'s, um den Radius zu bestimmen, und erweitert dann die Höhe, um sie mit den padding-' s anzupassen. Die margin-'s müssten basierend auf der Schriftgröße angepasst werden.

Update zum Entfernen des inneren Elements:

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

Verwendet Pseudoelemente, um die Höhe zu erzwingen. Benötigen Sie den Raum mit der Breite Null für die vertikale Ausrichtung. Verschob das line-height:0pxvom äußeren zum Pseudo, so dass es zumindest beim Herabsetzen für IE8 sichtbar ist.

Ryachza
quelle
5
Für mich war dies die beste Lösung. Es erlaubt größere Zahlen und ist am skalierbarsten. Alle anderen Lösungen haben viel zu viel harte Größencodierung. Das hat am wenigsten. Die Schriftgröße kann um einiges geändert werden, ohne dies zu beschädigen. Wenn es drastisch geändert wird, muss die Marge angepasst werden, aber es ist sehr nachsichtig. Die Verwendung eines verschachtelten Elements ist jedoch etwas negativ.
Necreaux
@Necreaux Die Antwort wurde mit einer Version aktualisiert, die das explizite innere Element durch Pseudoelemente ersetzt.
Ryachza
1
Beste Lösung in der Tat. Ich habe gerade die Größe für den linken und den rechten Rand durch 0,35 em anstelle von 8 Pixel ersetzt (Auffüllen in aktualisierter Lösung). Damit Sie die Schriftgröße der Nummer ändern und einen geeigneten Rand beibehalten können.
Jibato
25

Der einfachste Weg ist die Verwendung der Bootstrap- und Badge-Klasse

 <span class="badge">1</span>
Navid
quelle
4
Das ist toll! Ich benutze bereits Bootstrap, ich wusste nur nicht, dass diese Klasse existiert.
Justin
1
Schöne Antwort navid!
SeyedPooya Soofbaf
22

Diese Version basiert nicht auf fest codierten, festen Werten, sondern auf Größen im Verhältnis zu font-sizeden div.

http://jsfiddle.net/qod1vstv/

Geben Sie hier die Bildbeschreibung ein

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>
Wolfgang Ziegler
quelle
1
Hallo, das ist sehr schön, aber wenn die Zahl groß ist, rollt sie sogar in den 100ern oder 1000ern aus dem Kreis. Wäre es auch möglich, die Größe der Schriftart zu verwenden, um eine neue Hintergrundfarbe zu erstellen
Transformator
1
Schöne Lösung!
Jomofrodo
8

Hierfür können Sie den Rahmenradius verwenden:

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

Spielen Sie mit dem Randradius und den Füllwerten, bis Sie mit dem Ergebnis zufrieden sind.

Dies funktioniert jedoch nicht in allen Browsern. Ich denke, IE unterstützt immer noch keine abgerundeten Ecken.

Kayahr
quelle
Vergessen Sie nicht `-webkit-border-radius: 15px;` auch gibt es einen Fix für IE htmlremix.com/css/curved-corner-border-radius-cross-browser, aber denken Sie zweimal darüber nach, es zu implementieren
Hannes
+1 wahrscheinlich die einfachste Methode ... Fallback für IE sieht ebenfalls in Ordnung aus (Quadrat). WordPress macht es so, wenn ich mich erinnere
Ross
4

Meine Lösung hier - dies ermöglicht leicht verschiedene Größen und Farben und verbindet sich mit einem CMS zur redaktionellen Kontrolle. Für IE, der sich zu Quadraten verschlechtert.

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

Es ist nicht allzu schwer zu sehen, wie das geht. Die größere Frage ist, ob es möglich ist, die Abmessungen des Kreises auf den Inhalt zu skalieren.

Derzeit denke ich nicht, dass es möglich ist. Jemand?

Bearinthewoods
quelle
3

Spät zur Party, aber hier ist eine reine Bootstrap-Lösung, die für mich funktioniert hat. Ich benutze 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>

Sie fügen bg-dark text-white rounded-circle px-3 py-1 mx-2 h3Ihrem <span>(oder einem anderen) Element grundsätzlich Klassen hinzu und sind fertig.

Beachten Sie, dass Sie möglicherweise Rand- und Füllklassen anpassen müssen, wenn Ihr Inhalt mehr als eine Ziffer hat.

Punkt net
quelle
2

Sie arbeiten wie mit einem Standardblock, das ist ein Quadrat

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

Dies ist eine Funktion von CSS 3 und wird nicht sehr gut unterstützt. Sie können sich auf Firefox und Safari verlassen.

<div class="circle"><span>1234</span></div>
Damian Leszczyński - Vash
quelle
2

HTML-BEISPIEL

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

}
Leonardo Vega
quelle
Obwohl dieser Code nützlich ist, wäre es gut, eine Erklärung zu geben
mhatch
2

Spät zur Party, aber hier ist die Lösung, die ich mit https://codepen.io/jnbruno/pen/vNpPpW gewählt habe

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>

Erforderlich keine zusätzliche Arbeit. Vielen Dank, John Noel Bruno

Dt23
quelle
Wer ist John Noel Bruno? Wenn Sie es von einem Blog oder Tutorial erhalten, wäre das Bereitstellen von Links ein Plus
Dush
1

Mach so etwas in deinem CSS

 div {
    Breite: 10em; Höhe: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }}
  p {
    Textausrichtung: Mitte; Rand oben: 4.5em;
  }}

Verwenden Sie das Absatz-Tag, um den Text zu schreiben. hoffentlich hilft das

1000Sonnen
quelle
1

So etwas , was ich getan habe hier arbeiten könnte (Nummern 0 bis 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>
jstol
quelle
1

Wenn Sie die erste Antwort verbessern, entfernen Sie einfach die Polsterung und fügen Sie hinzu line-heightund 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;
}
Hubyx Reds
quelle
1

Hier ist meine Art, es mit der quadratischen Methode zu machen. Der Vorteil ist, dass es mit unterschiedlichen Werten funktioniert, Sie jedoch 2 Bereiche benötigen.

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

Chris Li
quelle
0

Die Antwort von dreißig Punkten ist richtig, aber es fehlt ein kleiner Punkt. Sie müssen position: relative hinzufügen , wenn Sie einen zentrierten Wert im Kreis haben und auch einen anderen Zahlenbereich einschließen möchten. Zum Beispiel 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;
}

Eine einfachste Lösung ist jedoch die Verwendung von Bootstrap

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

Marco Maggiotti
quelle