it-swarm.com.de

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: 

Number in Circle Image

Ist das möglich und wie wird es erreicht?

200
Pentium10

Hier ist eine Demo zu JSFiddle und ein Snippet:

.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  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>

Damit dies in IE8 und älter funktioniert, müssen Sie CSS3 PIE herunterladen und verwenden. Meine obige Demo funktioniert nicht in IE8, aber das liegt nur daran, dass jsFiddle nicht PIE.htc host.

371
thirtydot

Das Problem bei den meisten anderen Antworten ist, dass Sie die Größe des äußeren Containers so anpassen müssen, dass er die perfekte Größe hat, basierend auf der Schriftgröße und der Anzahl der anzuzeigenden Zeichen. 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 Größenkreis gut funktionieren. Setzen Sie einfach width und line-height auf 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 verlängern oder verkürzen müssen, müssen Sie lediglich die Breite des Containers anpassen, um eine bessere Anpassung zu erreichen.

Siehe auf JSFiddle .

80
Mike

Bei 20 und darunter können Sie einfach die Unicode-Zeichen ① ② ... ⑳ verwenden

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

48
Tom N

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

Der Radius wird von der Breite des Inhalts und den margin-s bestimmt. Anschließend wird die Höhe mit den padding-s entsprechend erweitert. Die margin-s müssten je nach 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. Der line-height:0px wurde vom äußeren zum Pseudo verschoben, so dass er zumindest sichtbar ist, wenn er für IE8 herabgesetzt wird.

32
ryachza

der einfachste Weg ist die Verwendung von Bootstrap- und Badge-Klassen

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

Diese Version basiert nicht auf fest codierten, festen Werten, sondern richtet sich relativ zum font-size der div.

http://jsfiddle.net/qod1vstv/

 enter image description here

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

Sie können den Randradius dafür 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 Auffüllwerten, bis Sie mit dem Ergebnis zufrieden sind.

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

7
kayahr

Meine Lösung hier - dies ermöglicht problemlos verschiedene Größen und Farben und bindet ein CMS für die redaktionelle Kontrolle. Für IE zu Quadraten degradieren.

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 schwer zu sehen, wie das geht. Die größere Frage ist, ob es möglich ist, die Dimensionen des Kreises dem Inhalt anzupassen. 

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

4
bearinthewoods

Sie arbeiten wie ein 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 also auf Firefox und Safari verlassen. 

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

Verbessern Sie die erste Antwort, indem Sie die Auffüllung entfernen und line-height und vertical-align hinzufügen:

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

Tun Sie so etwas in Ihrer CSS

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

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

1
1000Suns

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;

}
1
Leonardo Vega

Etwas wie das, was ich getan habe hier könnte funktionieren (für Zahlen von 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>
1
jstol

Dies ist meine Art und Weise, es mit der quadratischen Methode zu tun. oben ist es mit verschiedenen Werten, aber Sie benötigen 2 Spannweiten.

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

1
Chris Li

Spät zur Party, aber hier ist eine reine Bootstrap-Lösung, die für mich funktioniert hat. Ich verwende 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 im Wesentlichen bg-dark text-white rounded-circle px-3 py-1 mx-2 h3-Klassen zu Ihrem <span>-Element (oder was auch immer) hinzu und Sie sind fertig.

Beachten Sie, dass Sie Margin- und Padding-Klassen möglicherweise anpassen müssen, wenn Ihr Inhalt mehr als eine Ziffer enthält.

0
dotNET

Spät zur Party, aber hier ist die Lösung, die ich mit 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>

Keine zusätzliche Arbeit erforderlich .. Danke John Noel Bruno

0
Dt23

Die Antwort von thirtydot ist richtig, aber es fehlt ein kleiner Punkt. Sie müssen position hinzufügen: relative , wenn Sie einen zentrierten Wert im Kreis haben und auch einen anderen Zahlenbereich angeben 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;
}

am einfachsten ist jedoch die Verwendung von Bootstrap 

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

0
Marco Maggiotti