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

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

Ist das möglich und wie wird es erreicht?

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.

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 .

Wenn es 20 und niedriger ist, können Sie einfach die Unicode-Zeichen ① ② ... ⑳ verwenden

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

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.

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

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

Diese Version basiert nicht auf fest codierten, festen Werten, sondern auf Größen im Verhältnis zu font-sizeden 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>

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.

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?

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.

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>

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;

}

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

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

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>

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

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>

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>